小程序模板网

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

 

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.   floatright;  
  5.   padding14rpx 35rpx;  
  6.   margin-right20rpx;  
  7. }  
  8.   
  9. .can {  
  10.   background#eee;  
  11.   floatright;  
  12.   padding14rpx 35rpx;  
  13.   margin-right0rpx;  
  14. }  
  15.   
  16. .container-column {  
  17.   display: flex;  
  18.   flex-direction: column;  
  19.   width100%;  
  20.   background-colorwhite;  
  21. }  
  22.   
  23. .buydes-container {  
  24.   display: flex;  
  25.   height100%;  
  26.   justify-content: space-between;  
  27. }  
  28.   
  29. .buydes-dialog-container {  
  30.   width100%;  
  31.   height100%;  
  32.   justify-content: space-between;  
  33.   background-color: rgba(1515260.7);  
  34.   positionfixed;  
  35.   z-index999;  
  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.   padding24rpx;  
  49.   display: flex;  
  50.   justify-contentcenter;  
  51.   border-bottom1rpx solid #eee;  
  52. }  
  53.   
  54. .close {  
  55.   width22px;  
  56.   height22px;  
  57.   background#555;  
  58.   border1px solid #555;  
  59.   border-radius: 50% 50%;  
  60.   line-height22px;  
  61.   text-aligncenter;  
  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-size16px;  
  71.   positionabsolute;  
  72.   right: 10rpx;  
  73.   margin-top10rpx;  
  74. }  
  75.   
  76. .addimg {  
  77.   floatleft;  
  78. }  
  79.   
  80. .addimg image {  
  81.   width220rpx;  
  82.   height220rpx;  
  83.   padding10rpx 10rpx 10rpx 0;  
  84. }  
  85.   
  86. .goodsaddinfo {  
  87.   border-bottom1px solid #eee;  
  88.   width100%;  
  89. }  
  90.   
  91. .addname {  
  92.   width420rpx;  
  93.   floatleft;  
  94.   font-size32rpx;  
  95.   margin30rpx 0 0 0;  
  96. }  
  97.   
  98. .addnamet {  
  99.   height70rpx;  
  100.   overflowhidden;  
  101. }  
  102.   
  103. .addprice {  
  104.   font-size42rpx;  
  105.   color#f60;  
  106.   padding15rpx 0;  
  107. }  
  108.   
  109. .stepper {  
  110.   border1px solid #ccc;  
  111.   border-radius: 3px;  
  112.   width80px;  
  113.   height28px;  
  114.   floatleft;  
  115.   margin-bottom10px;  
  116.   displayblock;  
  117.   margin-left6px;  
  118. }  
  119.   
  120. /*加号与减号*/  
  121.   
  122. .stepper text {  
  123.   width19px;  
  124.   line-height26px;  
  125.   text-aligncenter;  
  126.   floatleft;  
  127. }  
  128.   
  129. /*数值*/  
  130.   
  131. .stepper input {  
  132.   colorblack;  
  133.   floatleft;  
  134.   margin0 auto;  
  135.   width40px;  
  136.   height28px;  
  137.   text-aligncenter;  
  138.   font-size12px;  
  139.   border-left1px solid #ccc;  
  140.   border-right1px solid #ccc;  
  141. }  
  142.   
  143. /*普通样式*/  
  144.   
  145. .stepper .normal {  
  146.   colorblack;  
  147. }  
  148.   
  149. /*禁用样式*/  
  150.   
  151. .stepper .disabled {  
  152.   color#ccc;  
  153. }  
  154.   
  155. /*复选框样式*/  
  156.   
  157. .carts-list icon {  
  158.   margin-top60rpx;  
  159.   margin-right20rpx;  
  160. }  
  161.   
  162. .attr li {  
  163.   width100%;  
  164.   floatright;  
  165.   border-bottom1px solid #f2f2f2;  
  166.   line-height28px;  
  167.   padding10px 0 0 0;  
  168. }  
  169.   
  170. .attr li view {  
  171.   width620rpx;  
  172.   floatright;  
  173. }  
  174.   
  175. .attr label {  
  176.   font-size12px;  
  177.   floatleft;  
  178.   width90rpx;  
  179.   margin-left4%;  
  180. }  
  181.   
  182. .attr span {  
  183.   font-size14px;  
  184.   border-radius: 3px;  
  185.   text-aligncenter;  
  186.   color#ff4200;  
  187.   padding0px 15px;  
  188.   margin-right10px;  
  189.   border1px solid #eee;  
  190.   floatleft;  
  191.   displayblock;  
  192.   margin-bottom10px;  
  193.   box-sizing: border-box;  
  194. }  
  195.   
  196. .attr .hover {  
  197.   background#ff4200;  
  198.   border1px solid #ff4200;  
  199.   color#fff;  
  200. }  
  201.   
  202. .num label {  
  203.   font-size12px;  
  204.   floatleft;  
  205.   width90rpx;  
  206.   margin-left4%;  
  207. }  
  208.   
  209. .num {  
  210.   width96%;  
  211.   floatright;  
  212.   border-bottom1px solid #f2f2f2;  
  213.   line-height28px;  
  214.   padding10px 0 0 0;  
  215.   displayblock;  
  216.   overflowauto;  
  217. }  
  218.   
  219. .up, .down {  
  220.   font-family"iconfont";  
  221.   font-size12px;  
  222.   color#556665;  
  223.   positionabsolute;  
  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.   width100%;  
  238.   background#ff4200;  
  239.   text-aligncenter;  
  240.   color#fff;  
  241.   floatright;  
  242.   height50px;  
  243.   line-height50px;  
  244.   font-size16px;  
  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 点击咨询
QQ在线咨询