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


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相册效果代码(点击创建即可)
Apr 16 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
浅谈JS中几种轻松处理'this'指向方式
Sep 16 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中SESSION使用中的一点经验总结
2012/03/30 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Django卸载之后重新安装的方法
2017/03/15 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
苹果Mac升级:MacSales.com
2017/11/20 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
军训 自我鉴定
2014/02/03 职场文书
学术诚信承诺书
2014/05/26 职场文书
社区春季防火方案
2014/06/02 职场文书
单位授权委托书范本
2014/09/26 职场文书
高三毕业评语
2014/12/31 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python