现官方文档有wx.showModal（）这个API，基本满足了我们的大部分弹窗需求，但是我们要做到带图片的弹窗，或者弹窗按钮自定义背景颜色，这个API还是不能满足的，所以我们只有自己亲手写一个组件了。话不多说，先看效果图：
代码如下：
modal.wxml
现官方文档有wx.showModal（）这个API，基本满足了我们的大部分弹窗需求，但是我们要做到带图片的弹窗，或者弹窗按钮自定义背景颜色，这个API还是不能满足的，所以我们只有自己亲手写一个组件了。话不多说，先看效果图：
代码如下：
modal.wxml
确定要退圈吗？
狠心离开
回心转意
modal.wxss:
/* 遮罩层 */
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.5;
}
/* 弹出层 */
.modalDlg {
width: 67%;
position: fixed;
top: 35%;
left: 0;
right: 0;
z-index: 9999;
margin: 0 auto;
background-color: #fff;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.flex-around{
display: flex;
justify-content: space-around;
align-items: center;
}
/* 弹出层里面的图片 */
.modalDlg image {
width: 248rpx;
height: 212rpx;
margin: 30rpx auto 0 auto;
}
/* 弹出层里面的按钮 */
.btn {
width: 180rpx;
height: 64rpx;
background: #44b549;
line-height: 64rpx;
text-align: center;
color: #fff;
font-size: 29rpx;
margin: 20rpx auto;
border-radius: 100rpx;
}
.confirm {
background: linear-gradient(143deg, rgba(246, 61, 82, 1) 0%, rgba(255, 151, 115, 1) 100%);
}
.cancel{
background: linear-gradient(143deg, rgba(246, 61, 82, 1) 0%, rgba(255, 151, 115, 1) 100%);
}
/* 弹出层里面的文字 */
.test {
width: 100%;
text-align: center;
font-size: 36rpx;
margin: 20rpx auto;
color: #333;
}
modal.js:
// longbing_card/components/modal/modal.js
Component({
/**
- 组件的属性列表
*/
properties: {
//接收页面参数
showModal: {
type: null
}
},
/**
- 组件的初始数据
*/
data: {
},
/**
- 组件的方法列表
*/
methods: {
// 禁止屏幕滚动
preventTouchMove: function() {},
// 狠心离开
confirm: function() {
this.setData({
showModal: false
})
},
// 回心转意
cancel: function() {
this.setData({
showModal: false
})
}
}
})
页面wxml:
点击弹窗
页面js:
data:{
showModal: false, //弹窗
}
// 点击按钮触发弹窗
toMore: function() {
this.setData({
showModal: true
})
},
好了，基本的就是这样。