微信小程序实现点击出现弹窗
作者：神的少女光芒万丈
这篇文章主要为大家详细介绍了微信小程序实现点击出现弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现点击出现弹窗的具体代码，供大家参考，具体内容如下
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文件中
<dialog title="警告" status="{{status}}" bind:cancel='handlecancel' bind:confirm="handleConfirm" content='啦啦啦我也不知道这什么哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈'>
<image src='//gw.alicdn.com/imgextra/i1/O1CN016q4k5T1IPNCZM2RTx_!!6000000000885-0-tps-640-260.jpg_Q75.jpg'></image>
</dialog>
<view bindtap='handleTap' class='show'>显示</view>.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文件
<view class="mask" wx:if="{{status}}">
<view class="dialog">
<view class="dialog-header">
{{title}}
</view>
<view class="dialog-body">
<view wx:if="{{content}}" class='content'>{{content}}</view>
<slot></slot>
</view>
<view class="dialog-footer">
<view class="dialog-btn" bindtap='handleCancel'>取消</view>
<view class="dialog-btn" bindtap='handleConfirm'>确认</view>
</view>
</view>
</view>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%;
}这样就可以实现一个简单的点击出现弹窗的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。