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


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网页关闭时提醒效果脚本
Oct 22 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
angular.js实现购物车功能
Oct 23 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
React组件refs的使用详解
Feb 09 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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对gzip文件或者字符串解压实例参考
2008/07/25 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
php单一接口的实现方法
2015/06/20 PHP
PHP常用技巧汇总
2016/03/04 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
CI框架的安全性分析
2016/05/18 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
laravel自定义分页效果
2017/07/23 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
py中的目录与文件判别代码
2008/07/16 Python
Python代码的打包与发布详解
2014/07/30 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
Python中防止sql注入的方法详解
2017/02/25 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
python处理RSTP视频流过程解析
2020/01/11 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
司机岗位职责
2013/11/15 职场文书
公务员综合考察材料
2014/02/01 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
文化建设工作方案
2014/05/12 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书