<---------------------------------定义组建------------------------------------------------------------------------->
// 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;
}
