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


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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
js对象的构造和继承实现代码
Dec 05 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 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之Smarty入门
2007/01/04 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
使用Python设计一个代码统计工具
2018/04/04 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
酒店仓管员岗位职责
2014/04/28 职场文书
听课评语大全
2014/04/30 职场文书
优秀家长事迹材料
2014/05/17 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
开会通知
2015/04/20 职场文书
社会实践心得体会范文
2016/01/14 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
Python常遇到的错误和异常
2021/11/02 Python