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


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,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 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中simplexml_load_string函数使用说明
2011/01/01 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
composer.lock文件的作用
2016/02/03 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
在Django的视图(View)外使用Session的方法
2015/07/23 Python
python实现多线程抓取知乎用户
2016/12/12 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
如何使用repr调试python程序
2020/02/28 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
Servlet如何得到服务器的信息
2015/12/22 面试题
聚美优品广告词改编
2014/03/14 职场文书
先进单位申报材料
2014/12/25 职场文书
2015年底工作总结范文
2015/05/15 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
《实心球》教学反思
2016/02/23 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫