微信小程序-自定义弹出框
Posted heart中的烦恼哟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序-自定义弹出框相关的知识，希望对你有一定的参考价值。
<---------------------------------定义组建------------------------------------------------------------------------->
// 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;
}
以上是关于微信小程序-自定义弹出框的主要内容，如果未能解决你的问题，请参考以下文章