<---------------------------------定義組建------------------------------------------------------------------------->

// components/component-tag-name.js Component({ options: { multipleSlots: true // 在元件定義時的選項中啟用多slot支援 }, /** * 元件的屬性列表 */ properties: {
},
/** * 元件的初始資料 */ data: {
},
/** * 元件的方法列表 */ methods: { myActionSheetCancel() { this.hideMyActionSheet() },
showMyActionSheet: function () { // 顯示遮罩層 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), showModalStatus: true }) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export() }) }.bind(this), 200) }, hideMyActionSheet: function () { // 隱藏遮罩層 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), }) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export(), showModalStatus: false }) }.bind(this), 200) }, } }) json { "component": true, "usingComponents": {} } wxml <!-- 元件模板 --> <view class="wrapper"> <slot name="before"></slot> <view class="maskLayer" bindtap="hideMyActionSheet" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="actionSheetLayer" wx:if="{{showModalStatus}}"> <slot></slot> <view class='cancel' bindtap='myActionSheetCancel'> 取消 </view> </view> </view> wxss /* components/component-tag-name.wxss */ .maskLayer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.2; overflow: hidden; z-index: 1000; color: #fff; }
.actionSheetLayer { width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 2000; background: #ededed; } .play{ width: 100%; height: 98rpx; line-height: 98rpx; text-align: center; background: #fff; border-top: 1rpx solid rgba(204, 204, 204, 0.356); } .cancel{ width: 100%; line-height: 98rpx; height: 98rpx; text-align: center; background: #fff; border-top: 1rpx solid #ededed; margin-top: 10rpx; }

<----------------------------------------引用頁面------------------------------------------------------------------>

const app = getApp()
Page({ data: { actionSheetText: ['選項1', '選項2', '選項3'] }, onLoad: function () { this.myActionSheet = this.selectComponent(".list") console.log(this); }, showMyActionSheet() { console.log('click'); this.myActionSheet.showMyActionSheet() }, actionSheetIndex(e){ console.log('當前下標：', e.currentTarget.dataset.index) } }) JSON { "usingComponents": { "myActionSheet": "/component/components/component-tag-name" } } wxml <!-- 引用元件的頁面模版 --> <view> <myActionSheet class='list'> <view slot="before" bindtap='showMyActionSheet' wx:for='{{5}}'>某圖示</view> <view wx:for='{{actionSheetText}}' class='cancelist' bindtap='actionSheetIndex' data-index='{{index}}'>{{item}}</view> </myActionSheet> </view> wxss .intro { margin: 30px; text-align: center; } .cancel{ width: 100%; line-height: 98rpx; height: 98rpx; text-align: center; background: #fff; border-top: 1rpx solid #ededed; margin-top: 10rpx; } .cancelist{ width: 100%; line-height: 98rpx; height: 98rpx; text-align: center; background: #fff; border-top: 1rpx solid #ededed; }