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


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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
JS+Canvas实现五子棋游戏
Aug 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动态生成函数示例
2014/03/21 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
用console.table()调试javascript
2014/09/04 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
jquery编写日期选择器
2017/03/16 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
vue axios整合使用全攻略
2018/05/24 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
python冒泡排序简单实现方法
2015/07/09 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
家具促销活动方案
2014/02/16 职场文书
毕业设计说明书
2014/05/07 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python