微信小程序 -- 自定義抽屜式菜單（底部，從下向上拉出）

 

 

實現一個抽屜菜單的案例

 

 

 wxml

<!--button-->
<view class="btn" bindtap="powerDrawer" data-statu="open">button</view>
<!--mask-->
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<!--content-->
<!--使用animation屬性指定需要執行的動畫-->
<view animation="{{animationData}}" class="drawer_attr_box" wx:if="{{showModalStatus}}">
    <!--drawer content-->
    <view class="drawer_content">
        <view class="drawer_title line">菜單1</view>
        <view class="drawer_title line">菜單2</view>
        <view class="drawer_title line">菜單3</view>
        <view class="drawer_title line">菜單4</view>
        <view class="drawer_title">菜單5</view>
    </view>
</view>

 

css

/*button*/
.btn {
  width: 80%;
  padding: 20rpx 0;
  border-radius: 10rpx;
  text-align: center;
  margin: 40rpx 10%;
  background: #0C1939;
  color: #fff;
}
/*mask*/
.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
}
/*content*/
.drawer_attr_box {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1001;
  background: #fff;
}
.drawer_content {
  padding: 20rpx 40rpx;
  height: 470rpx;
  overflow-y: scroll;
}
.drawer_title{
  padding:20rpx;
  font:42rpx "microsoft yahei";
  text-align: center;
}
.line{
  border-bottom: 1px solid #f8f8f8;
}

　　

js

Page({
    data: {
        showModalStatus: false
    },
    powerDrawer: function (e) {
        var currentStatu = e.currentTarget.dataset.statu;
        this.util(currentStatu)
    },
    util: function (currentStatu) {
        /* 動畫部分 */
        // 第1步：創建動畫實例 
        var animation = wx.createAnimation({
            duration: 200,  //動畫時長
            timingFunction: "linear", //線性
            delay: 0  //0則不延遲
        });

        // 第2步：這個動畫實例賦給當前的動畫實例
        this.animation = animation;

        // 第3步：執行第一組動畫：Y軸偏移240px后(盒子高度是240px)，停
        animation.translateY(240).step();

        // 第4步：導出動畫對象賦給數據對象儲存
        this.setData({
            animationData: animation.export()
        })

        // 第5步：設置定時器到指定時候后，執行第二組動畫
        setTimeout(function () {
            // 執行第二組動畫：Y軸不偏移，停
            animation.translateY(0).step()
            // 給數據對象儲存的第一組動畫，更替為執行完第二組動畫的動畫對象
            this.setData({
                animationData: animation
            })

            //關閉抽屜
            if (currentStatu == "close") {
                this.setData(
                    {
                        showModalStatus: false
                    }
                );
            }
        }.bind(this), 200)

        // 顯示抽屜
        if (currentStatu == "open") {
            this.setData(
                {
                    showModalStatus: true
                }
            );
        }
    }
})

 

 

 參考鏈接：https://blog.csdn.net/u012509485/article/details/80488519