微信小程序实现弹出层效果


Posted in Javascript onMay 26, 2020

本文实例为大家分享了微信小程序实现弹出层效果的具体代码,供大家参考,具体内容如下

先看下效果图吧 

微信小程序实现弹出层效果

其实这个效果实现起来很简单,就是通过三目运算符来控制遮罩层的显示和隐藏

贴代码了:

规则按钮:

<text class='rule' bindtap='showRule'>规则</text>

遮罩层:我这个数据是从后台拿来动态渲染到页面的

<!-- 规则提示 -->
 <view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
 <view class='ruleZhezhaoContent'>
  <view class='ruleZhezhaoText' wx:for='{{rule}}' wx:for-index='index'>
  <text>{{index+1}}</text>
  <text>{{item}}</text>
  </view>
  <image src='../../images/rule-hide.png' class='ruleHide' bindtap='hideRule'></image>
 </view>
 </view>
 <!-- end -->

css:

/* 规则提示层 */
.isRuleShow{
 display: block;
}
.isRuleHide{
 display: none;
}
.ruleZhezhao{
 height: 100%;
 width: 100%;
 position: fixed;
 background-color:rgba(0, 0, 0, .5);
 z-index: 2;
 top: 0;
 left: 0;
}
.ruleZhezhaoContent{
 padding: 20rpx 0;
 width: 80%;
 background: #e1d2b1;
 margin: 40% auto;
 border-radius: 20rpx;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 align-items: center;
 position: relative;
}
.ruleZhezhaoText{
 width: 80%;
 font-size: 30rpx;
 color: #856d5f;
 display: flex;
 flex-direction: row;
 align-items: center;
 margin: 25rpx 0 25rpx 0;
}
.ruleZhezhaoText text:nth-child(1){
 color: #fff;
 font-size: 40rpx;
 height: 60rpx;
 width: 60rpx;
 background: #664a2c;
 display: block;
 text-align: center;
 line-height: 60rpx;
 border-radius: 30rpx;
 margin-right: 10rpx;
}
.ruleZhezhaoText text:nth-child(2){
 flex-wrap:wrap;
 width: 80%;
}
.ruleHide{
 height: 60rpx!important;
 width: 60rpx!important;
 position: absolute;
 top: -20rpx;
 right: -20rpx;
}
.rule{
 display: block;
 border: 1px solid #fff;
 width: 100rpx;
 text-align: center;
 line-height: 60rpx;
 color: #fff;
 height: 60rpx;
 font-size: 30rpx;
 border-radius: 30rpx;
 position: absolute;
 top: 10%;
 right: 5%;
}
/* end */

点击规则按钮:

//打开规则提示
 showRule: function () {
 this.setData({
  isRuleTrue: true
 })
 },

点击关闭按钮:

//关闭规则提示
 hideRule: function () {
 this.setData({
  isRuleTrue: false
 })
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
微信小程序实现预览图片功能
Oct 22 #Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 #Javascript
微信小程序实现多选功能
Nov 04 #Javascript
微信小程序实现无限滚动列表
May 29 #Javascript
微信小程序自定义轮播图
Nov 04 #Javascript
微信小程序实现带缩略图轮播效果
Nov 04 #Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 #Javascript
You might like
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
利用python为运维人员写一个监控脚本
2018/03/25 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
普师专业个人自荐信范文
2013/11/26 职场文书
九年级化学教学反思
2014/01/28 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
销售顾问岗位职责
2014/02/25 职场文书
股东协议书
2014/04/14 职场文书
网络销售员岗位职责
2015/04/11 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
无房证明样本
2015/06/17 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
python中pymysql包操作数据库方法
2022/04/19 Python
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技