微信小程序实现点击出现弹窗

本文实例为大家分享了微信小程序实现点击出现弹窗的具体代码，供大家参考，具体内容如下

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测试数据/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%;

}

这样就可以实现一个简单的点击出现弹窗的效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现点击出现弹窗的详细内容...