微信小程序自定义弹窗实现详解(可通用)


Posted in Javascript onJuly 04, 2019

本文为自定义弹窗,该内容可满足如下需求:

  • 自定义各种布局弹窗
  • 点击弹窗布局外消失弹窗
  • 弹出弹窗时背景阴影半透明
  • 各方向弹出效果(本文为自下而上弹出)

话不多说,先上图看效果:

微信小程序自定义弹窗实现详解(可通用)

点击昵称旁边的编辑按钮

微信小程序自定义弹窗实现详解(可通用)

弹出自定义弹窗

上图是我自己拙劣的审美自定义的一个编辑弹窗,因为重点是自定义弹窗,所以在下文的通用代码中我就去掉了这些布局,剩下填充部分由读者自行填充。

下面上代码,老规矩,还是微信小程序对应的几个文件的代码,可直接贴到页面里用的哦。
.wxml 文件中 直接放到wxml的最底部就行了,十分简练。

<view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}">
 <view class="zan-dialog__mask" bindtap="toggleDialog" />
 <view class="zan-dialog__container">
  <view style='padding:100rpx;'>此处是填充的布局代码</view>
 </view>
</view>

.wxss 文件中 直接放进去就行,根据注释可自行调节弹框带不带阴影。

.zan-dialog__mask {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 10;
 background: rgba(0, 0, 0, 0);//设置阴影半透明背景如: background: rgba(0, 0, 0, 0.4);
 display: none;
}

.zan-dialog__container {
 position: fixed;
 bottom: 400rpx;
 width: 650rpx;//弹窗布局宽
 height: 350rpx;//弹窗布局高,与下面弹出距离transform有关
 margin-left: 50rpx;
 background: #f8f8f8;
 transform: translateY(300%);//弹框弹出距离,与弹框布局高度有关,如300%表示弹起距离为3倍弹窗高度
 transition: all 0.4s ease;
 z-index: 12;
 border-radius: 20rpx;
 box-shadow: 0px 3px 3px 2px gainsboro;//弹框的悬浮阴影效果,如不需要可注释该行
}

.zan-dialog--show .zan-dialog__container {
 transform: translateY(0);
}

.zan-dialog--show .zan-dialog__mask {
 display: block;
}

.js 文件中 处理弹框弹出消失逻辑,以及自定义弹窗里的业务逻辑。

Page({
 data: {
  showDialog: false
 },

 /**
 * 控制 pop 的打开关闭
 * 该方法作用有2:
 * 1:点击弹窗以外的位置可消失弹窗
 * 2:用到弹出或者关闭弹窗的业务逻辑时都可调用
 */
 toggleDialog() {
  this.setData({
   showDialog: !this.data.showDialog
  });
 },

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

Javascript 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 #Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 #Javascript
vue-cli配置flexible过程详解
Jul 04 #Javascript
vue动态配置模板 'component is'代码
Jul 04 #Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 #Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
小程序中canvas的drawImage方法参数使用详解
Jul 04 #Javascript
You might like
php实现singleton()单例模式实例
2014/11/06 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
解放web程序员的输入验证
2006/10/06 Javascript
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
新手简单了解vue
2019/05/29 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
Python 正则表达式操作指南
2009/05/04 Python
python合并文本文件示例
2014/02/07 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
教育专业自荐书范文
2013/12/17 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
租房合同协议书
2014/04/09 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
分家协议书范本
2016/03/22 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
Java对文件的读写操作方法
2022/04/29 Java/Android