本文实例为大家分享了微信小程序实现点击出现弹窗的具体代码，供大家参考，具体内容如下
1.现在page文件里面定义一个dh的文件，然后在component定义一个可复用的组件为dislog
然后在dh的json文件中引入这个组件
{
"usingComponents": {
"dialog":"../../component/dialog/index"
}
}
2.dh中.js文件
// pages/dh/index.js
Page({
data: {
status:false
},
handleTap(){
this.setData({
status:true
})
},
handlecancel(){
this.setData({
status:false
})
},
handleConfirm(){
this.setData({
status:false
})
}
})
.wxml文件中
显示
.wxss文件
/* pages/dh/index.wxss */
.show{
/* width:100%;
height:100vh; */
width:200rpx;
height:140rpx;
background:#ccc;
border-radius:20rpx;
color:#fff;
text-align:center;
line-height:140rpx;
font-size:40rpx;
margin:0 auto;
margin-top:470rpx;
}
在组件中dialog文件中
index.js文件
// component/dialog/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
title:{
type:String,
value:"标题"
},
content:String,
status:{
type:Boolean,
value:false,
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
handleCancel(){
this.triggerEvent("cancel")
},
handleConfirm(){
// this.triggerEvent('confirm')
this.triggerEvent('confirm')
}
}
})
wxml文件
{{title}} {{content}} 取消 确认
wxss文件
.mask{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgb(0,0,0,0.3);
display:flex;
align-items: center;
justify-content:center;
}
.dialog{
width:600rpx;
height:auto;
background:#fff;
border-radius:30rpx;
}
.dialog-header{
padding:30rpx 0;
text-align:center;
font-size:36rpx;
}
.dialog-footer{
display:flex;
}
.dialog-btn{
flex:1;
text-align:center;
padding:40rpx 0;
border-top:1rpx solid #eee;
}
.dialog-btn:first-child{
border-right:1rpx solid #eee;
}
.dialog-body{
padding:30rpx;
}
.content {
text-indent: 72rpx;
color:#333;
}
.dialog-body image{
width:100%;
}
这样就可以实现一个简单的点击出现弹窗的效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。