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


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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 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
生成静态页面的PHP类
2006/07/15 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
Python实现控制台输入密码的方法
2015/05/29 Python
python类和继承用法实例
2015/07/07 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
佳能德国网上商店:Canon德国
2017/03/18 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
玲玲的画教学反思
2014/02/04 职场文书
倡议书格式
2014/04/14 职场文书
2014年三万活动总结
2014/04/26 职场文书
感恩之星事迹材料
2014/05/03 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
教师节表彰会主持词
2015/07/06 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书