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


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 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
javascript三种代码注释方法
Jun 02 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 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设计模式 Facade(外观模式)
2011/06/26 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
解决django FileFIELD的编码问题
2020/03/30 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
python3 kubernetes api的使用示例
2021/01/12 Python
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
小学母亲节活动方案
2014/03/14 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers