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


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制作的幻灯片图集效果打包下载
Feb 12 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
JavaScript基础之this详解
Jun 04 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
PHP 中的一些经验积累
2006/10/09 PHP
新版PHP极大的增强功能和性能
2006/10/09 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
PHP目录操作实例总结
2016/09/27 PHP
php session的应用详细介绍
2017/03/22 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js 深拷贝函数
2008/12/04 Javascript
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
老生常谈python中的重载
2018/11/11 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
django实现用户注册实例讲解
2019/10/30 Python
python中selenium库的基本使用详解
2020/07/31 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
移动通信专业自荐信范文
2013/11/12 职场文书
食品安全宣传标语
2014/06/07 职场文书
政风行风评议心得体会
2014/10/21 职场文书
诚信承诺书
2015/01/19 职场文书
运动会开幕式主持词
2015/07/01 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
python单向链表实例详解
2022/05/25 Python
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python