欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 教程

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

发布：2017-12-09 17:01浏览： 次来源：网络 作者：tianshu

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

 

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

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>  





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

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有