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


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跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
详解Vue3中对VDOM的改进
Apr 23 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+MSSQL分页的例子
2006/10/09 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
python获得图片base64编码示例
2014/01/16 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Python求离散序列导数的示例
2019/07/10 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
Python解析微信dat文件的方法
2020/11/30 Python
python RSA加密的示例
2020/12/09 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
小学生红领巾广播稿
2014/01/21 职场文书
初三政治教学反思
2014/01/30 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
学生干部培训方案
2014/06/12 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
Python多线程 Queue 模块常见用法
2021/07/04 Python