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


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 相关文章推荐
js 异步处理进度条
Apr 01 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
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中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
PHP实现货币换算的方法
2014/11/29 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
PHP chop()函数讲解
2019/02/11 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
javascript实现日历效果
2019/06/17 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
Python获取时间戳代码实例
2019/09/24 Python
Python序列化pickle模块使用详解
2020/03/05 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
TCP/IP的分层模型
2013/10/27 面试题
在校生党员自我评价
2013/09/25 职场文书
行政人事岗位职责
2014/03/17 职场文书
国际金融专业自荐信
2014/07/05 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
关于召开会议的通知
2015/04/15 职场文书
MySQL常用慢查询分析工具详解
2022/08/14 MySQL