微信小程序带动画弹窗组件使用方法详解


Posted in Javascript onNovember 27, 2018

本文实例为大家分享了微信小程序带动画弹窗的具体代码,供大家参考,具体内容如下

基本效果如下:

微信小程序带动画弹窗组件使用方法详解

具体实现如下:

第一步:

新建一个 components 文件夹,用于存放我们以后开发中的所用组件,在 components 组件中新建一个popup文件夹来存放我们的弹窗组件,在popup下右击新建 Component 并命名为 popup 后,会生成对应的 json wxml wxss js 4个文件,也就是一个自定义组件的组成部分,此时项目结构应该如下图所示:

微信小程序带动画弹窗组件使用方法详解

第二步上代码:

popup.wxml

<view hidden="{{!flag}}" class='container' style=''>
 <view bindtap='_error' class='wrap {{wrapAnimate}}' style='background:rgba(0,0,0,{{bgOpacity}});'></view>
 <view class='popup-container {{popupAnimate}}'>
 <view class="wx-popup-title">{{title}}</view>
 <view class="wx-popup-con">{{content}}</view>
 <view class="wx-popup-btn">
  <text class="btn-no" bindtap='_error'>{{btn_no}}</text>
  <text class="btn-ok" bindtap='_success'>{{btn_ok}}</text>
 </view>
 <image bindtap='_error' src='../../image/close.png' mode='widthFix' class='btn-colse'></image>
 </view>
</view>

popup.wxss

.container{font-size:15px;color:#666;font-weight: bold;z-index:2;position:fixed;width:100vw;height:100vh;}
.wrap{position:fixed;top:0;left:0;bottom:0;right:0;}
.popup-container {position: fixed;left: 50%;top: 100%;width: 80%;max-width: 600rpx;border: 2rpx solid #ccc;border-radius: 10rpx;box-sizing: bordre-box;transform: translate(-50%, -50%);background: #fff;opacity: 0;}
.wx-popup-title {width: 100%;padding: 20rpx 0;text-align: center;font-size: 40rpx;border-bottom: 2rpx solid #89cfea;}
.wx-popup-con {margin: 60rpx 10rpx;text-align: center;}
.wx-popup-btn {display: flex;justify-content: space-around;margin-bottom: 40rpx;}
.wx-popup-btn text {display: flex;align-items: center;justify-content: center;width: 30%;height: 88rpx;border: 2rpx solid #ccc;border-radius: 88rpx;}
.btn-colse{width:35px;height:35px;position:absolute;bottom:-60px;left:50%;margin-left:-17.5px;}
.wrapAnimate{animation: wrapAnimate 1s linear forwards}
@keyframes wrapAnimate{
 0%{}
 100%{background:rgba(0,0,0,0.7);}
}
.wrapAnimateOut{animation: wrapAnimateOut 1s 0.2s linear forwards}
@keyframes wrapAnimateOut{
 0%{background:rgba(0,0,0,0.7);}
 100%{background:rgba(0,0,0,0);}
}
.popupAnimate{animation: popupAnimate 1.2s linear forwards}
@keyframes popupAnimate{
 0%{}
 60%{top:47%;opacity: 1;}
 80%{top:53%;opacity: 1;}
 100%{top:50%;opacity: 1;}
}
.popupAnimateOut{animation: popupAnimateOut 1.2s linear forwards}
@keyframes popupAnimateOut{
 0%{top:50%;opacity: 1;}
 20%{top:47%;opacity: 1;}
 100%{}
}

popup.js

Component({
 options: {
 multipleSlots: true // 在组件定义时的选项中启用多slot支持
 },
 /*组件的属性列表*/
 properties: {
 title: {
  type: String,
  value: '标题'
 },
 // 弹窗内容
 content: {
  type: String,
  value: '内容'
 },
 // 弹窗取消按钮文字
 btn_no: {
  type: String,
  value: '取消'
 },
 // 弹窗确认按钮文字
 btn_ok: {
  type: String,
  value: '确定'
 }
 },
 /* 组件的初始数据 */
 data: {
 flag: true,
 bgOpacity:0,
 wrapAnimate:'wrapAnimate',
 popupAnimate:'popupAnimate'
 },
 /* 组件的方法列表 */
 methods: {
 //隐藏弹框
 hidePopup: function () {
  const that = this;
  this.setData({ bgOpacity: 0.7, wrapAnimate: "wrapAnimateOut", popupAnimate:"popupAnimateOut"})
  setTimeout(function(){
  that.setData({flag: false})
  },1200)
 },
 /* 内部私有方法建议以下划线开头 triggerEvent 用于触发事件 */
 _error() {//触发取消回调
  this.triggerEvent("error")
 },
 _success() {//触发成功回调
  this.triggerEvent("success");
 }
 }
})

popup.json

{
 "component": true,
 "usingComponents": {}
}

第三步引用组件:

index.json

{
 "usingComponents": {
 "popup":"/components/popup/popup"
 }
}

index.wxml

<popup
 id='popup'
 title='弹窗组件'
 content='学会了吗'
 btn_no='没有'
 btn_ok='学会了'
 binderror="_error"
 bindsuccess="_success"
 >

</popup>

index.js

Page({
 showPopup() {
 this.popup.showPopup();
 },
 //取消事件
 _error() {
 console.log('你点击了取消');
 this.selectComponent("#popup").hidePopup();
 },
 //确认事件
 _success() {
 console.log('你点击了确定');
 this.selectComponent("#popup").hidePopup();
 }
})

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

Javascript 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
红米手机抢购的js代码
Mar 10 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
微信小程序实现日历功能
Nov 27 #Javascript
微信小程序实现打卡日历功能
Sep 21 #Javascript
微信小程序实现时间预约功能
Nov 27 #Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 #Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 #Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 #Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
PHP 变量的定义方法
2010/01/26 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
angular仿支付宝密码框输入效果
2017/03/25 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
react系列从零开始_简单谈谈react
2017/07/06 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
python字符串中的单双引
2017/02/16 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
什么是唯一索引
2015/07/05 面试题
会计学自我鉴定
2014/02/06 职场文书
导游词之杭州西湖
2019/09/19 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers