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


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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 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中去掉字符串首尾空格的方法
2012/05/19 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
python路径的写法及目录的获取方式
2019/12/26 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
教师现实表现材料
2014/02/14 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
成都人事代理协议书
2014/10/25 职场文书
护理见习报告范文
2014/11/03 职场文书
2015年实习单位评语
2015/03/25 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers