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


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 相关文章推荐
js模仿java的Map集合详解
Jan 06 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
前端开发基础javaScript的六大作用
Aug 06 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作的文本留言本的例子(六)
2006/10/09 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
php发送邮件的问题详解
2015/06/22 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
vue中倒计时组件的实例代码
2018/07/06 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
python圣诞树编写实例详解
2020/02/13 Python
python 操作excel表格的方法
2020/12/05 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
会计专业大学生求职信范文
2014/01/28 职场文书
龙门石窟导游词
2015/02/02 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript