小程序实现菜单栏推拉显示效果

HTML部分

<view bindtap="bindToShow">点击显示列表</view>
  <view class="list-wrap" hidden="{{isHide}}">
    <view class="list-bg" bindtap="bindToHide" animation="{{menuBgAnimation}}" ></view>
    <view class="list" animation="{{menuAnimation}}">
      <view wx:for="{{list}}" wx:key="{{index}}">{{item.name}}</view>
    </view>
  </view>

js部分

const app = getApp()

Page({
  data: {
    list:[
    {name:'微信小程序Animation1'},{name:'微信小程序Animation2'},{name:'微信小程序Animation3'},
    {name:'微信小程序Animation4'},{name:'微信小程序Animation5'},{name:'微信小程序Animation6'},
    {name:'微信小程序Animation7'},{name:'微信小程序Animation8'},{name:'微信小程序Animation9'},
    ],
    isHide:true,
    menuAnimation: '', // 菜单动画
    menuOpen: '', // 菜单展开动画
    menuClose: '', // 菜单收起动画
    menuBgAnimation: '', // 菜单背景动画
    menuBgOpen: '', // 菜单背景展开动画
    menuBgClose: '', // 菜单背景收起动画
  },
  onLoad() {
    this.prepareAnimation()
  },
  onShow(){
  },
  prepareAnimation() {
    // 开启 先将背景拉到可视窗口，然后渐渐显示出来
    this.menuBgOpen = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease',
    }).opacity(1).step().export();
    // 关闭 先渐渐透明,后将背景拉出可视窗口，
    this.menuBgClose = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease',
    }).opacity(0).step().export();

    this.menuOpen = wx.createAnimation({ duration: 300, timingFunction: 'ease' }).width(238).step().export();
    this.menuClose = wx.createAnimation({ duration: 300, timingFunction: 'ease' }).width(0).step().export();
    this.setData({
        menuOpen: this.menuOpen,
        menuClose: this.menuClose,
        menuBgOpen: this.menuBgOpen,
        menuBgClose: this.menuBgClose,
    });
  },
  bindToHide(){
    this.hideAnimation();
  },
  hideAnimation() { // 隐藏的动画
    let _this = this;
    this.setData({
        menuAnimation: this.menuClose,
        menuBgAnimation: this.menuBgClose,
    });
    setTimeout(() => {
        _this.setData({ isHide: true });
    }, 350);
  },
  bindToShow(){
    this.showAnimation();
  },
  showAnimation() { // 显示的动画
    let _this = this;
    this.setData({ isHide: false }); //这个赋值不能删掉
    setTimeout(() => {
        _this.setData({
            isHide: false,
            menuAnimation: _this.menuOpen,
            menuBgAnimation: _this.menuBgOpen,
        });
    }, 50);
  },
})

css部分

.list-wrap{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
}
.list-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.7);
}
.list{
  width: 0;
  position: fixed;
  height: 100%;
  background-color: #fff;
  flex: 1;
}
.list > view {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}