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


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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
基于JQuery的cookie插件
Apr 07 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 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开启opcache提升代码性能
2015/04/26 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
分享PHP守护进程类
2015/12/30 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
python检测服务器是否正常
2014/02/16 Python
推荐11个实用Python库
2015/01/23 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python简单读取大文件的方法
2016/07/01 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
python连接PostgreSQL过程解析
2020/02/09 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
谢师宴邀请函
2015/02/02 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
幼师自荐信范文
2015/03/06 职场文书
活动经费申请报告
2015/05/15 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python