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


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 相关文章推荐
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
vue实现滑动解锁功能
Mar 03 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中$this-&amp;gt;含义分析
2009/11/29 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
javascript 弹出层组件(升级版)
2011/05/12 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
python实现中文转换url编码的方法
2016/06/14 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
公司年会晚宴演讲稿
2014/01/06 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
工地宣传标语
2014/06/18 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
导游词之吉林花园山
2019/10/17 职场文书
手残删除python之后的补救方法
2021/06/26 Python
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android