微信小程序实现弹框效果


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五图轮播切换实用版
Aug 17 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
七个很有意思的PHP函数
May 12 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
详解Node.js如何处理ES6模块
May 15 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循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
载入进度条 效果
2006/07/08 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
微信小程序日历效果
2018/12/29 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python购物车程序简单代码
2018/04/18 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Python 串口通信的实现
2020/09/29 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
班长自荐书范文
2014/02/11 职场文书
人民调解员培训方案
2014/06/05 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
python实现进度条的多种实现
2021/04/29 Python
python开发实时可视化仪表盘的示例
2021/05/07 Python
Python基础之元编程知识总结
2021/05/23 Python