一、自定义弹框组件
1、组件定义
在components目录下创建dialog文件夹，然后选择文件夹，右键，点击"新建Component"，就会创建四个文件。如下所示：
wxml
<!--components/dialog/index.wxml-->
<view wx:if="{{isShow}}" class="tip-area">
<view bindtap="hideClick" class="dialog-content">
<view class="tip-content">
<view class="title">
<text>{{title}}</text>
</view>
<text decode="true" style="margin-left:20rpx;">{{contentStr}}</text>
</view>
<view class="btn-content">
{{btnStr}}
</view>
</view>
</view>
js
// components/dialog/index.js
Component({
properties: {
isShow: {//false:弹出框消息 true:弹出框显示
value: false,
type: Boolean
},
contentStr:{//弹出框需要显示的内容
value: '内容',
type: String,
},
title:{//弹出框需要显示的内容
value: '标题',
type: String,
},
btnStr:{//按钮文本(可进行自行扩展两个按钮)
value: '确定',
type: String,
}
},
data: {
timeId: null,//弹出框消息倒计时标识
},
observers: {//监听isShow属性的变化，来进行判断是否显示弹出框
"isShow": function (value) {
clearTimeout(this.data.timeId);
if (value) {
this.data.timeId = setTimeout(() => {
this.setData({
isShow: false,
});
}, 20000);
}
}
},
methods: {
hideClick() {//点击弹出框的任意位置进行点击事件的传递，从而修改isShow的值，来控制弹出框消失
this.triggerEvent('clickDialog', {
isShow: false
});
clearTimeout(this.data.timeId);
}
},
})
wxss
/* components/dialog/index.wxss */
.tip-area {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, .5);
}
.dialog-content{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: auto;
display: flex;
flex-direction: column;
}
.dialog-content .title{
width: 100%;
text-align: center;
line-height: 70rpx;
height: 70rpx;
/* background-color: green; */
font-size: 36rpx;
margin-bottom: 20rpx;
}
.tip-content {
padding:40rpx;
background: white;
width: 80vw;
height: 44vw;
border-radius: 20rpx 20rpx 0 0;
box-sizing: border-box;
/* line-height: 34vw; */
/* text-align: center; */
font-size: 28rpx;
color: black;
border-bottom: .5rpx solid #e8e8e9;
padding-top: 40rpx;
}
.btn-content{
width: 100%;
height: 10vw;
border-radius: 0 0 20rpx 20rpx;
background: white;
text-align: center;
line-height: 10vw;
font-size: 32rpx;
}
2、组件的使用
（1）、页面的json文件中引入
{
"usingComponents": {
"dialog": "/components/dialog/index"
}
}
（2）、点击事件
<view class="rules_desc" bindtap="showDialog">
<text>规则说明</text>
</view>
（3）、使用组件
<dialog bind:clickDialog="clickDialog" isShow="{{isShow}}" contentStr="  积分以自然年为计算单位，三年为一个有效期，实行滚动清零，每年12月底执行。即您在第一年获得的积分，只要在第三年年底之前使用都有效。" btnStr="确定" title="积分规则说明"></dialog>
（4）、js中
Page({
data: {
isShow: false,//true：显示弹出框 false：隐藏弹出框
},
showDialog(e){//显示弹出框
this.setData({
isShow: true,
})
},
clickDialog(e){//接受弹出框点击反馈监听事件，来进行隐藏弹出框
this.setData({
isShow: e.detail.isShow,
})
},
})
效果如下：
二、页面中写弹框组件
以下是弹框显示二维码的代码
wxml
<view wx:if="{{isShow}}" class="tip-area">
<view class="dialog-content">
<view class="tip-content">
<view class="title">
<text>二维码</text>
</view>
<view class="qrcode">
<canvas id='qrcode' type="2d" style='width:300rpx;height:300rpx;' ></canvas>
</view>
</view>
<view class="btn-content" bindtap="hideClick">
取消
</view>
</view>
</view>
less
.tip-area {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, .5);
.dialog-content{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: auto;
display: flex;
flex-direction: column;
.tip-content {
padding:40rpx;
background: white;
width: 80vw;
height: 70vw;
border-radius: 20rpx 20rpx 0 0;
box-sizing: border-box;
/* line-height: 34vw; */
/* text-align: center; */
font-size: 28rpx;
color: black;
border-bottom: .5rpx solid #e8e8e9;
padding-top: 40rpx;
.title{
width: 100%;
text-align: center;
line-height: 70rpx;
height: 70rpx;
/* background-color: green; */
font-size: 36rpx;
margin-bottom: 20rpx;
}
.qrcode{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 60rpx;
margin-bottom: 60rpx;
}
}
.btn-content{
width: 100%;
height: 10vw;
border-radius: 0 0 20rpx 20rpx;
background: white;
text-align: center;
line-height: 10vw;
font-size: 32rpx;
}
}
}
js
data: {
isShow: false,
qrCodeLink: null,
qrcodePath: null,
},
showQrcode(e){
this.setData({
isShow: true
})
console.log(e)
const {code} = e.currentTarget.dataset;
this.setData({
qrCodeLink: code
})
this.createQrcode(code)
},
hideClick(){
this.setData({
isShow: false,
qrCodeLink: null,
qrcodePath: null
})
},
// 生成二维码
createQrcode(code) {
var that = this;
const query = wx.createSelectorQuery()
query.select('#qrcode')
.fields({
node: true,
size: true
})
.exec((res) => {
console.log(res)
var canvas = res[0].node
// 调用方法drawQrcode生成二维码
QRCode({
canvas: canvas,
canvasId: 'qrcode',
// width:that.createRpx2px(300),
// width: that.createRpx2px(300),
// padding: 10,
// background: '#ffffff',
// foreground: '#000000',
text: code
})
// 获取临时路径（得到之后，想干嘛就干嘛了）
wx.canvasToTempFilePath({
canvasId: 'qrcode',
canvas: canvas,
x: 0,
y: 0,
success(res) {
// console.log('二维码临时路径：', res.tempFilePath)
that.setData({
qrcodePath: res.tempFilePath,
// isShow: true
})
// console.log('二维码临时路径：', that.data.qrcodePath)
},
fail(res) {
console.error(res)
}
})
})
},
效果如下：
标签：微信,程序,isShow,height,width,弹出,background,20rpx,弹框 From： https://www.cnblogs.com/zwh0910/p/17582085.html