小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

ECSHOP 小程序底部滑出效果,淡入效果,底部菜单导航,加入购物车 ...

发布时间：2017-12-09 17:01 所属栏目：小程序开发教程

 

ECSHOP 小程序底部滑出效果,淡入效果,底部菜单导航,加入购物车 演示扫描二维码

收藏一个商品之后 -> 个人中心 -> 我的收藏 查看演示效果。

QQ：4292423

 

上先效果图。

JS（这里的JS我是直接用别人的，CSDN有下，自己处理了下样式）

 

 

[javascript] view plain copy
 
  1. let animationShowHeight = 300;  
  2.   
  3. Page({  
  4.   data: {  
  5.     showModalStatus: false,  
  6.     imageHeight: 0,  
  7.     imageWidth: 0  
  8.   },  
  9.   
  10.   showModal: function () {  
  11.     // 显示遮罩层  
  12.     var animation = wx.createAnimation({  
  13.       duration: 200,  
  14.       timingFunction: "linear",  
  15.       delay: 0  
  16.     })  
  17.     this.animation = animation  
  18.     animation.translateY(animationShowHeight).step()  
  19.     this.setData({  
  20.       animationData: animation.export(),  
  21.       showModalStatus: true  
  22.     })  
  23.     setTimeout(function () {  
  24.       animation.translateY(0).step()  
  25.       this.setData({  
  26.         animationData: animation.export()  
  27.       })  
  28.     }.bind(this), 0)  
  29.   },  
  30.   hideModal: function () {  
  31.     // 隐藏遮罩层  
  32.     var animation = wx.createAnimation({  
  33.       duration: 200,  
  34.       timingFunction: "linear",  
  35.       delay: 0  
  36.     })  
  37.     this.animation = animation;  
  38.     animation.translateY(animationShowHeight).step()  
  39.     this.setData({  
  40.       animationData: animation.export(),  
  41.     })  
  42.     setTimeout(function () {  
  43.       animation.translateY(0).step()  
  44.       this.setData({  
  45.         animationData: animation.export(),  
  46.         showModalStatus: false  
  47.       })  
  48.     }.bind(this), 200)  
  49.   },  
  50.   onShow: function () {  
  51.     let that = this;  
  52.     wx.getSystemInfo({  
  53.       success: function (res) {  
  54.         animationShowHeight = res.windowHeight;  
  55.       }  
  56.     })  
  57.   },  
  58. })  


 

 

CSS

 

[css] view plain copy
 
  1. .add {  
  2.   background: #f60;  
  3.   color: #fff;  
  4.   float: right;  
  5.   padding: 14rpx 35rpx;  
  6.   margin-right: 20rpx;  
  7. }  
  8.   
  9. .can {  
  10.   background: #eee;  
  11.   float: right;  
  12.   padding: 14rpx 35rpx;  
  13.   margin-right: 0rpx;  
  14. }  
  15.   
  16. .container-column {  
  17.   display: flex;  
  18.   flex-direction: column;  
  19.   width: 100%;  
  20.   background-color: white;  
  21. }  
  22.   
  23. .buydes-container {  
  24.   display: flex;  
  25.   height: 100%;  
  26.   justify-content: space-between;  
  27. }  
  28.   
  29. .buydes-dialog-container {  
  30.   width: 100%;  
  31.   height: 100%;  
  32.   justify-content: space-between;  
  33.   background-color: rgba(15, 15, 26, 0.7);  
  34.   position: fixed;  
  35.   z-index: 999;  
  36. }  
  37.   
  38. .buydes-dialog-container-top {  
  39.   flex-grow: 1;  
  40. }  
  41.   
  42. .buydes-dialog-container-bottom {  
  43.   display: flex;  
  44.   flex-grow: 0;  
  45. }  
  46.   
  47. .buydes-dialog-container-bottom-item {  
  48.   padding: 24rpx;  
  49.   display: flex;  
  50.   justify-content: center;  
  51.   border-bottom: 1rpx solid #eee;  
  52. }  
  53.   
  54. .close {  
  55.   width: 22px;  
  56.   height: 22px;  
  57.   background: #555;  
  58.   border: 1px solid #555;  
  59.   border-radius: 50% 50%;  
  60.   line-height: 22px;  
  61.   text-align: center;  
  62.   color: #fff;  
  63.   font-family: 'Lucida Sans',  
  64.                  'Lucida Sans Regular',  
  65.                  'Lucida Grande',  
  66.                  'Lucida Sans Unicode',  
  67.                  Geneva,  
  68.                  Verdana,  
  69.                  sans-serif;  
  70.   font-size: 16px;  
  71.   position: absolute;  
  72.   right: 10rpx;  
  73.   margin-top: 10rpx;  
  74. }  
  75.   
  76. .addimg {  
  77.   float: left;  
  78. }  
  79.   
  80. .addimg image {  
  81.   width: 220rpx;  
  82.   height: 220rpx;  
  83.   padding: 10rpx 10rpx 10rpx 0;  
  84. }  
  85.   
  86. .goodsaddinfo {  
  87.   border-bottom: 1px solid #eee;  
  88.   width: 100%;  
  89. }  
  90.   
  91. .addname {  
  92.   width: 420rpx;  
  93.   float: left;  
  94.   font-size: 32rpx;  
  95.   margin: 30rpx 0 0 0;  
  96. }  
  97.   
  98. .addnamet {  
  99.   height: 70rpx;  
  100.   overflow: hidden;  
  101. }  
  102.   
  103. .addprice {  
  104.   font-size: 42rpx;  
  105.   color: #f60;  
  106.   padding: 15rpx 0;  
  107. }  
  108.   
  109. .stepper {  
  110.   border: 1px solid #ccc;  
  111.   border-radius: 3px;  
  112.   width: 80px;  
  113.   height: 28px;  
  114.   float: left;  
  115.   margin-bottom: 10px;  
  116.   display: block;  
  117.   margin-left: 6px;  
  118. }  
  119.   
  120. /*加号与减号*/  
  121.   
  122. .stepper text {  
  123.   width: 19px;  
  124.   line-height: 26px;  
  125.   text-align: center;  
  126.   float: left;  
  127. }  
  128.   
  129. /*数值*/  
  130.   
  131. .stepper input {  
  132.   color: black;  
  133.   float: left;  
  134.   margin: 0 auto;  
  135.   width: 40px;  
  136.   height: 28px;  
  137.   text-align: center;  
  138.   font-size: 12px;  
  139.   border-left: 1px solid #ccc;  
  140.   border-right: 1px solid #ccc;  
  141. }  
  142.   
  143. /*普通样式*/  
  144.   
  145. .stepper .normal {  
  146.   color: black;  
  147. }  
  148.   
  149. /*禁用样式*/  
  150.   
  151. .stepper .disabled {  
  152.   color: #ccc;  
  153. }  
  154.   
  155. /*复选框样式*/  
  156.   
  157. .carts-list icon {  
  158.   margin-top: 60rpx;  
  159.   margin-right: 20rpx;  
  160. }  
  161.   
  162. .attr li {  
  163.   width: 100%;  
  164.   float: right;  
  165.   border-bottom: 1px solid #f2f2f2;  
  166.   line-height: 28px;  
  167.   padding: 10px 0 0 0;  
  168. }  
  169.   
  170. .attr li view {  
  171.   width: 620rpx;  
  172.   float: right;  
  173. }  
  174.   
  175. .attr label {  
  176.   font-size: 12px;  
  177.   float: left;  
  178.   width: 90rpx;  
  179.   margin-left: 4%;  
  180. }  
  181.   
  182. .attr span {  
  183.   font-size: 14px;  
  184.   border-radius: 3px;  
  185.   text-align: center;  
  186.   color: #ff4200;  
  187.   padding: 0px 15px;  
  188.   margin-right: 10px;  
  189.   border: 1px solid #eee;  
  190.   float: left;  
  191.   display: block;  
  192.   margin-bottom: 10px;  
  193.   box-sizing: border-box;  
  194. }  
  195.   
  196. .attr .hover {  
  197.   background: #ff4200;  
  198.   border: 1px solid #ff4200;  
  199.   color: #fff;  
  200. }  
  201.   
  202. .num label {  
  203.   font-size: 12px;  
  204.   float: left;  
  205.   width: 90rpx;  
  206.   margin-left: 4%;  
  207. }  
  208.   
  209. .num {  
  210.   width: 96%;  
  211.   float: right;  
  212.   border-bottom: 1px solid #f2f2f2;  
  213.   line-height: 28px;  
  214.   padding: 10px 0 0 0;  
  215.   display: block;  
  216.   overflow: auto;  
  217. }  
  218.   
  219. .up, .down {  
  220.   font-family: "iconfont";  
  221.   font-size: 12px;  
  222.   color: #556665;  
  223.   position: absolute;  
  224.   display: inline-block;  
  225.   right: 4%;  
  226. }  
  227.   
  228. .up:before {  
  229.   content: "\e616";  
  230. }  
  231.   
  232. .down:before {  
  233.   content: "\e615";  
  234. }  
  235.   
  236. .addcart {  
  237.   width: 100%;  
  238.   background: #ff4200;  
  239.   text-align: center;  
  240.   color: #fff;  
  241.   float: right;  
  242.   height: 50px;  
  243.   line-height: 50px;  
  244.   font-size: 16px;  
  245. }  

 

 

页面文件:

[html] view plain copy
 
  1. <view class="add" bindtap="showModal">加入购物车</view>  
  2.   
  3. <view animation="{{animationData}}" class="container-column buydes-dialog-container" wx:if="{{showModalStatus}}">  
  4.   <view class="buydes-dialog-container-top" bindtap="hideModal"></view>  
  5.     
  6.   <view class="container-column buydes-dialog-container-bottom">  
  7.   <view class="close" bindtap="hideModal">x</view>  
  8.   <view class="goodsaddinfo">  
  9.     <view class="addimg">  
  10.       <image src="https://xcx.yoyimm.com/images/201704/goods_img/317_G_1492632942900.jpg"></image>  
  11.     </view>  
  12.     <view class="addname">  
  13.       <view class="addnamet">商品名称比较一下商品名称比较一下商品名称比较一下商品名称比较一下商品名称比较一下</view>  
  14.       <view class="addprice">￥199元</view>  
  15.     </view>  
  16.   </view>  
  17.   
  18.   <view class="attr">  
  19.     <ul>  
  20.       <li>  
  21.         <label>尺码</label>  
  22.         <view>  
  23.           <span class="hover">S</span>  
  24.           <span>M</span>  
  25.           <span>L</span>  
  26.           <span>XL</span>  
  27.         </view>  
  28.       </li>  
  29.   
  30.       <li>  
  31.         <label>颜色</label>  
  32.         <view>  
  33.           <span class="hover">红色</span>  
  34.           <span>绿</span>  
  35.           <span>紫色</span>  
  36.           <span>紫色</span>  
  37.           <span>紫色</span>  
  38.         </view>  
  39.       </li>  
  40.     </ul>  
  41.   </view>  
  42.   <view class="num">  
  43.     <label>数量</label>  
  44.     <view class="stepper">  
  45.   
  46.       <!-- 减号 -->  
  47.       <text class="{{goods_number == 1 ? 'disabled' : 'normal'}}" bindtap="bindMinus">-</text>  
  48.   
  49.       <!-- 数值 -->  
  50.       <input type="number" bindchange="bindManual" value="1" />  
  51.   
  52.       <!-- 加号 -->  
  53.       <text class="normal" bindtap="bindPlus">+</text>  
  54.     </view>  
  55.   </view>  
  56.   <view class="addcart" bindtap="addToCart">加入购物车</view>  
  57.   
  58.   </view>  
  59. </view>  


易优小程序（企业版）+灵活api+前后代码开源 码云仓库:starfork
本文地址：https://www.eyoucms.com/wxmini/doc/course/18111.html 复制链接 如需定制请联系易优客服咨询：800182392 点击咨询

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

产品

服务

帮助

关于

工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务

联系我们
QQ在线咨询