微信小程序自定义底部弹出框

admin

使用场景：购物商城类，商品sku弹出选择样式：
效果图：


进阶：
html可以写成模板，方便随时引用；
css和js可以写到全局里面；

html：

1. <view bindtap="showModal">显示遮罩层</view>
   
2. <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
   
3. <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">弹出框内容写在这里</view>

复制代码

css:

1. .commodity_screen {
   
2.   width: 100%;
   
3.   height: 100%;
   
4.   position: fixed;
   
5.   top: 0;
   
6.   left: 0;
   
7.   background: #000;
   
8.   opacity: 0.2;
   
9.   overflow: hidden;
   
10.   z-index: 1000;
    
11.   color: #fff;
    
12. }
    
13. 
    
14. .commodity_attr_box {
    
15.   width: 100%;
    
16.   overflow: hidden;
    
17.   position: fixed;
    
18.   bottom: 0;
    
19.   left: 0;
    
20.   z-index: 2000;
    
21.   background: #fff;
    
22.   padding-top: 20rpx;
    
23. }

复制代码

js样式动画：

1. showModal: function () {
   
2.     // 显示遮罩层
   
3.     var animation = wx.createAnimation({
   
4.       duration: 200,
   
5.       timingFunction: "linear",
   
6.       delay: 0
   
7.     })
   
8.     this.animation = animation
   
9.     animation.translateY(300).step()
   
10.     this.setData({
    
11.       animationData: animation.export(),
    
12.       showModalStatus: true
    
13.     })
    
14.     setTimeout(function () {
    
15.       animation.translateY(0).step()
    
16.       this.setData({
    
17.         animationData: animation.export()
    
18.       })
    
19.     }.bind(this), 200)
    
20.   },
    
21.   hideModal: function () {
    
22.     // 隐藏遮罩层
    
23.     var animation = wx.createAnimation({
    
24.       duration: 200,
    
25.       timingFunction: "linear",
    
26.       delay: 0
    
27.     })
    
28.     this.animation = animation
    
29.     animation.translateY(300).step()
    
30.     this.setData({
    
31.       animationData: animation.export(),
    
32.     })
    
33.     setTimeout(function () {
    
34.       animation.translateY(0).step()
    
35.       this.setData({
    
36.         animationData: animation.export(),
    
37.         showModalStatus: false
    
38.       })
    
39.     }.bind(this), 200)
    
40.   }

复制代码