效果图

tngqd-id1kz.gif

使用方法

首先在json文件中引入组件：

{
 "usingComponents": {
   "x-action-sheet": "/components/action-sheet/action-sheet"
 }
}

在wxml中使用

<button bind:tap="showActionSheet">tap</button>

<x-action-sheet actionShow="{{actionShow}}">
  <view class="main">
    <button class="send">转发</button>
    <button class="share">分享</button>
  </view>
</x-action-sheet>

js中设置显示

data: {
    actionShow: false
  },

showActionSheet() {
    this.setData({
      actionShow: true
    })
  }

组件的实现

自定义组件，创建一个名字为action-sheet的组件

wxml中代码实现：

<view class="action-sheet {{maskAnimation}}" hidden="{{!show}}">
  <view class="container {{animation}}">
    <slot></slot>
    <button class="cancel" bind:tap="cancelAction">取消</button>
  </view>
</view>

wxss中布局的实现：

.action-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.container {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 30%;
  background-color: #fff;
}

.container .cancel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 2;
  font-size: 32rpx;
  color: #333;
  border-radius: 0;
  background-color: #fff;
  border-top: 12rpx solid #f7f7f7;
  padding-bottom: 68rpx;
}

.container .cancel::after {
  border: none;
  border-radius: 0;
}

.show-action-sheet {
  animation-name: show-animation;
  animation-duration: 0.25s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.hide-action-sheet {
  animation-name: hide-animation;
  animation-duration: 0.25s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.show-mask-animation {
  animation-name: show-mask;
  animation-duration: 0.25s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.hide-mask-animation {
  animation-name: hide-mask;
  animation-duration: 0.25s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes show-animation {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes hide-animation {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes show-mask {
  from {
    opacity: 0;
  }

  to {
    opacity: 1.0;
  }

}

@keyframes hide-mask {
  from {
    opacity: 1.0;
  }

  to {
    opacity: 0;
  }
}

js中的实现代码：

// components/action-sheet/action-sheet.js
Component({
  
  properties: {
    actionShow: Boolean
  },

  observers: {
    'actionShow': function(newValue) {

      this.setData({
        show: newValue,
        animation: newValue === true ? 'show-action-sheet' : 'hide-action-sheet',
        maskAnimation: newValue === true ? 'show-mask-animation': 'hide-mask-animation'
      })

    }
  },

  data: {
    show: false,
    animation: "",
    maskAnimation: ''
  },

  methods: {
    cancelAction() {
      this.setData({
        animation: 'hide-action-sheet',
        maskAnimation: 'hide-mask-animation'
      })

      setTimeout(() => {
        this.setData({
          show: false
        })
      }, 300);
    }
  }
})