微信小程序实现点击出现弹窗
作者:神的少女光芒万丈 时间:2024-04-19 10:14:43
本文实例为大家分享了微信小程序实现点击出现弹窗的具体代码,供大家参考,具体内容如下
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%;
}
这样就可以实现一个简单的点击出现弹窗的效果。
来源:https://blog.csdn.net/qq_45656036/article/details/120036578
标签:微信小程序,弹窗
0
投稿
猜你喜欢
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2022-04-01 08:18:50
Pandas实现一列数据分隔为两列
2021-01-06 04:31:36
网页中空格的烦恼
2011-04-28 09:26:00
Python封装成可带参数的EXE安装包实例
2023-05-19 04:50:17
JSP 开发之 releaseSession的实例详解
2023-06-14 11:49:03
Vue如何获取url路由地址和参数简单示例
2024-05-09 09:53:08
Python @property原理解析和用法实例
2023-05-19 00:59:41
Scrapy项目实战之爬取某社区用户详情
2022-04-16 11:36:31
Ajax request response 乱码解决方法
2024-06-05 09:21:52
python发送多人邮件没有展示收件人问题的解决方法
2023-01-03 05:16:10
python 进程池pool使用详解
2022-02-13 03:42:52
Python实现删除windows下的长路径文件
2023-06-07 22:33:18
ASP数据库连接方式大全
2023-07-12 05:52:59
python实现扫雷小游戏
2023-02-15 11:58:58
XML 在使用中产生的二十个热点问题
2008-05-29 11:07:00
举例讲解Python常用模块
2022-03-21 07:35:49
使用 XMLSPY 设计项目的 Schema 原型
2010-08-24 18:25:00
js跳转页面方法实现汇总
2024-04-27 15:19:23
XML入门精解之文件格式定义
2008-02-25 13:57:00
网站LOGO设计规范的思考--1.设计基础
2007-10-14 10:55:00