微信小程序实现弹框效果


Posted in Javascript onMay 26, 2020

本文实例为大家分享了微信小程序实现弹框效果的具体代码,供大家参考,具体内容如下

先上代码

wxml部分:

<view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'>
 <text>向上弹起</text>
</view>

<view class='top' bindtap='powerDrawer' data-statu="open" data-num='-300'>
 <text>向下弹出</text>
</view>



<!--遮罩部分-->
<view class="drawer_screen" wx:if="{{showModalStatus}}" bindtap="powerDrawer" data-statu="close"></view> 
<!--弹出层内容-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}"> 
 <view class='modalBox'>
 <view class='modalQues'>是否退出?</view>
 <view class='modalConf'>是否确定退出</view>
 <view class='hidePick'>
  <text bindtap="powerDrawer" data-statu="close" class='hideModal' >确定</text>
  <text bindtap="powerDrawer" data-statu="close" class='hideModal' >取消</text>
 </view>
 </view>
</view>

wxss部分:

.top {
 margin: 0 auto;
 margin-top: 50rpx;
 background: #1da0ee;
 color: #fff;
 width: 50vw;
 text-align: center
}

.drawer_screen { 
 width: 100%; 
 height: 100%; 
 position: fixed; 
 top: 0; 
 left: 0; 
 z-index: 1000; 
 background: #000; 
 opacity: 0.5; 
 overflow: hidden; 
} 
 
/*content*/
.drawer_box { 
 width:600rpx;
 height:300rpx;
 overflow:hidden;
 position:fixed;
 top:50%;
 left:50%;
 z-index:1001;
 background:#FAFAFA;
 margin-top:-150rpx;
 border-radius:3px;
 margin-left:-300rpx;
} 

.modalBox {
 padding: 60rpx;
 font-size: 30rpx;
}


.modalConf {
 font-size: 24rpx;
 color: #999;
 margin-top: 20rpx; 
}

.hidePick {
 text-align: right;
 margin-top: 50rpx;
}

.hideModal {
 color: #1da0ee;
 margin-left: 130rpx;
}

js部分:

Page({
 data: {

 },
 // 自定义弹框
 powerDrawer: function (e) {
 console.log(e) //打印出当前对象
 var currentStatu = e.currentTarget.dataset.statu; //获取statu属性值
 var currentNum = e.currentTarget.dataset.num;//获取num属性值
 currentNum = parseInt(currentNum , 10) //注意,这一步是将字符串转换为数字
 this.util(currentStatu,currentNum) //将参数引入util方法
 },
 util: function (currentStatu,currentNum) {
 /* 动画部分 */
 // 第1步:创建动画实例 
 var animation = wx.createAnimation({
  duration: 200, //动画时长 
  timingFunction: "linear", //线性 
  delay: 0 //0则不延迟 
 });

 // 第2步:这个动画实例赋给当前的动画实例 
 this.animation = animation;
 console.log(currentNum)
 // 第3步:执行第一组动画 
 animation.opacity(0).translateY(currentNum).step();

 // 第4步:导出动画对象赋给数据对象储存 
 this.setData({
  animationData: animation.export()
 })

 // 第5步:设置定时器到指定时候后,执行第二组动画 
 setTimeout(function () {
  // 执行第二组动画 
  animation.opacity(1).translateY(0).step();
  // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象 
  this.setData({
  animationData: animation
  })

  //关闭 
  if (currentStatu == "close") {
  this.setData(
   {
   showModalStatus: false
   }
  );
  }
 }.bind(this), 200)

 // 显示 
 if (currentStatu == "open") {
  this.setData(
  {
   showModalStatus: true
  }
  );
 }
 },
})

这只是很简单的一个弹框,类似的左右弹出只需要将translateY改为translateX就行了。 但是这段代码有一个问题就是当你点击关闭的时候,currentNum是不存在的,同时关闭弹框时currentNum我们不可以赋值 , 所以需要利用小程序的缓存APi来完善这个动效。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
javascript 闭包详解
Jul 02 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
微信小程序实现底部导航
Nov 05 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
微信小程序自定义弹出层效果
May 26 #Javascript
详解JSON.stringify()的5个秘密特性
May 26 #Javascript
微信小程序实现简单文字跑马灯
May 26 #Javascript
微信小程序实现带放大效果的轮播图
May 26 #Javascript
vue实现图片上传功能
May 28 #Javascript
小程序实现图片移动缩放效果
May 26 #Javascript
jQuery实现的分页插件完整示例
May 26 #jQuery
You might like
谈谈PHP语法(4)
2006/10/09 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
javascript中Function类型详解
2015/04/28 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
解决Python requests 报错方法集锦
2017/03/19 Python
Python获取当前路径实现代码
2017/05/08 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
用python做游戏的细节详解
2019/06/25 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
浅析Python3 pip换源问题
2020/01/06 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
易程科技软件测试笔试
2013/03/24 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
社区学习十八大感想
2014/01/22 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
房屋出售授权委托书
2014/10/12 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书