微信小程序自定义弹出层效果


Posted in Javascript onMay 26, 2020

本文实例为大家分享了微信小程序实现弹出层效果的具体代码,供大家参考,具体内容如下

效果图

微信小程序自定义弹出层效果

WXML

<view class='popup' wx:if="{{popShow}}">
 <view class='mask' catchtouchmove="preventTouchMove" catchtap='closePop'>
 </view>
 <!-- 弹出层 -->
  <view class='popup_main' id='popup_main' >
 <!-- 关闭按钮 -->
  <view class='close_wrapper'>
   <image class='close_icon' src='/images/select_icons/close.png' mode='widthFix' bindtap='closePop'></image>
  </view>
 <!-- 主要内容 -->
  <view class='pop_list_wrapper'>这里加入你想加入的内容</view>
  </view>
</view>

WXSS

.popup {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
 }
 .mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
 }
 .popup_main {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 85%;
  transform: translate(-50%, -50%);
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  border: 5px;
  border-radius: 10px;
 }
 .close_wrapper {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
 }
 .close_icon {
  width: 16px;
 }

JS

data: {
/** 弹出层 **/
 popShow: false,
}

 /**
 * 弹出层
 */

 // 打开弹窗
 popupTap: function (e) {
 this.setData({
  popShow: true
 })
 },
 // 关闭弹窗
 closePop: function (e) {
 this.setData({
  popShow: false
 })
 },
 // 这个函数内容为空 用于阻止屏幕滚动
 preventTouchMove: function (e) {
 },

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
详解JSON.stringify()的5个秘密特性
May 26 #Javascript
微信小程序实现简单文字跑马灯
May 26 #Javascript
微信小程序实现带放大效果的轮播图
May 26 #Javascript
vue实现图片上传功能
May 28 #Javascript
小程序实现图片移动缩放效果
May 26 #Javascript
jQuery实现的分页插件完整示例
May 26 #jQuery
js实现时间日期校验
May 26 #Javascript
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php自动获取关键字的方法
2015/01/06 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
在Python程序中操作MySQL的基本方法
2015/07/29 Python
python批量修改图片大小的方法
2018/07/24 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
特色冷饮店创业计划书
2014/01/28 职场文书
公司请假条范文
2014/04/11 职场文书