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


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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
vue iview 隐藏Table组件里的某一列操作
Nov 13 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
PHP实现验证码校验功能
2017/11/16 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
JavaScript函数详解
2015/02/27 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
Python实现简单石头剪刀布游戏
2021/01/20 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
医院工作检讨书范文
2014/02/10 职场文书
目标责任书范文
2014/04/14 职场文书
授权委托书格式
2014/07/31 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis