关于微信小程序自定义actionSheet

近日开发微信小程序时，发现微信官方API（wx.showActionSheet）的诸多限制，比如最大长度只能是6项，以及点击取消回弹bug等。

许多业务需要用到回弹但是里面的内容又想自定义，撸了个可以自定义内容和高度的actionSheet。

不胜表达，上代码

组件actionst的WXML

<view class="actionSheet" wx:if="{{isShowSheet}}">
  <view class="master" bindtap="__closeMaster" animation="{{masterAnimate}}"></view>
  <view class="content" style="height: {{tops}};" animation="{{contentAnimate}}">
    <slot></slot>
  </view>
</view>

组件actionst的wxss

.actionSheet{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.master{
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .2;
}

.content{
  background-color: #fff;
  position: relative;
  top: -20%;
}

组件actionst的json

{
  "component": true,
  "usingComponents": {}
}

组件actionst的js

Component({
  properties: {
    tops:{
      type: String  //外部传入数据 content高度值为百分比例如60%
    }
  },
  data: {
    isShowSheet: false,
    openSheet: '',
    contentAnimate: null,
    masterAnimate: null,
  },
  methods: {
    __closeMaster(){
      var that = this;
      this.contentAnimate.top("0%").step();
      this.masterAnimate.opacity(0).step();
      this.setData({
        contentAnimate: this.contentAnimate.export(),
        masterAnimate: this.masterAnimate.export(),
      });
      setTimeout(function(){
        that.setData({
          isShowSheet: false,
        })
      },200)
    },
    __showMaster(){
      //创建动画  展开
      this.setData({
        isShowSheet: true,
      });
      // 容器上弹
      var contentAnimate = wx.createAnimation({
        duration: 100,
      })
      contentAnimate.top(`-${this.properties.tops}`).step();
      //master透明度
      var masterAnimate = wx.createAnimation({
        duration: 200,
      })
      masterAnimate.opacity(.5).step();
      this.contentAnimate = contentAnimate;
      this.masterAnimate = masterAnimate;
      this.setData({
        contentAnimate: contentAnimate.export(),
        masterAnimate: masterAnimate.export(),
      })
    }
  }
})

然后是引用组件 JSON文件引入声明

{
  "navigationBarTitleText": "测试",
  "usingComponents": {
    "actionst": "/component/actionst/actionst"
  }
}

使用

 <actionst class="actionst" tops="40%">
    <view class="">我是自定义内容,tops值为自定义高度</view>
  </actionst>

最后效果图

不知道怎么做gif 会有过渡效果 和微信原生的差不多.png

微信开发者工具浏览可能会不兼容动画，看不见可以用手机预览（害我找了一晚上的bug）

小子第一次献丑，给个赞嘛~