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


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中的循环优化
Nov 09 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
vue实现扫码功能
Jan 17 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 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
用libtemplate实现静态网页生成
2006/10/09 PHP
PHP时间戳使用实例代码
2008/06/07 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
PHP 采集获取指定网址的内容
2010/01/05 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python实现单词翻译功能
2017/06/06 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
Django实现简单的分页功能
2021/02/22 Python
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
大学共青团员个人自我评价
2014/04/16 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
介绍信怎么写
2015/05/05 职场文书
公司文体活动总结
2015/05/07 职场文书
大学生就业意向书
2015/05/11 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang