微信小程序实现点击出现弹窗
更新时间：2022年07月06日 16:23:17 作者：神的少女光芒万丈
这篇文章主要为大家详细介绍了微信小程序实现点击出现弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现点击出现弹窗的具体代码，供大家参考，具体内容如下
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%;
}这样就可以实现一个简单的点击出现弹窗的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了详解webpack多页面配置记录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
对于for循环相信大家再常用不过了,下面这篇文章主要给大家介绍了关于JS中for循环的四种写法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了新手入门带你学习JavaScript引擎运行原理,JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。下面我们来详细了解一下吧2019-06-06
javascript获取ckeditor编辑器的值(实现代码)
这篇文章主要介绍了javascript获取ckeditor编辑器的值，用于表单验证。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要为大家详细介绍了javascript实现手动点赞效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
这篇文章主要介绍了JavaScript前端中的设计模式，设计模式是一套被反复使用，多数人知晓的，经过分类编目的，代码设计经验的总结，感兴趣想要详细了解可以参考下文2023-05-05
这篇文章主要介绍了一张Web前端的思维导图分享,本文直接给出思维导图,图中详细描述了一些需要学习的知识、一些必备的知识,需要的朋友可以参考下2015-07-07
这篇文章主要为大家详细介绍了微信小程序实现横屏手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
下面小编就为大家分享一篇js判断输入框不能为空格或null值的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
JS中getElementsByClassName与classList兼容性问题解决方案分析
这篇文章主要介绍了JS中getElementsByClassName与classList兼容性问题解决方案,结合实例形式分析了getElementsByClassName与classList的使用方法、原理及兼容性问题的处理技巧,需要的朋友可以参考下2019-08-08
最新评论