微信小程序实现弹框效果

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

先上代码

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来完善这个动效。

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

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

(0)

相关推荐

  • 微信小程序 弹框和模态框实现代码

    微信小程序 弹框和模态框实现代码 实现效果图: 实现代码: <view class="wxapp-modal" style="{{modal_style}}"> <view class="content"> </view> <view class="mask" bindtap="closeModal"></view> </view> /

  • 微信小程序之几种常见的弹框提示信息实现详解

    一.模态窗口 delete(){ wx.showModal({ title: '', content: '是否确认删除', success(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) } 二.提示你想提示的信息 提示你想提示的信息 wx.showToast({ title: '成功', icon: 'success', duration:

  • 微信小程序开发之实现自定义Toast弹框

    前言 之前有篇文章是写的Toast使用,但是有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了.有一个插件可以直接帮我们完成,WeToast. 先来看一下效果图: 怎么用呢,我们来看一下: WeTaost插件源码位于src目录下,包含3个文件. wetoast.js: 脚本代码 wetoast.wxml: 模板结构 wetoast.wxss: 样式 使用时只需要加入以上3个文件即可 第一步:在项目的app.js中引入wetoast.js,并注册到小程序上,小程序所有Page页面均可使

  • 微信小程序开发之toast等弹框提示使用教程

    介绍 微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT) . 看下有关参数说明: 代码很简单: wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true }) mask属性好像并没有起作用.有一点值得注意的是提示的延迟时间是有限制的,最大10000毫秒. 还有一个函数是wx.hideToast() ,这个是隐藏toast,主要用于显示加载提示的时候用到,

  • 微信小程序 modal弹框组件详解

    微信小程序  modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml <modal hidden="{{hidden}}" title="这里是title" confir

  • 微信小程序实现弹框效果

    本文实例为大家分享了微信小程序实现弹框效果的具体代码,供大家参考,具体内容如下 先上代码 wxml部分: <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上弹起</text> </view> <view class='top' bindtap='powerDrawer' data-statu="open&quo

  • 微信小程序自定义弹框效果

    本文实例为大家分享了微信小程序自定义弹框效果的具体代码,供大家参考,具体内容如下 wxml <!-- 取消订单按钮 --> <view class="cancelBtn" bindtap="cancelOrder" data-id="{{item.id}}" data-type="{{type}}">取消订单</view> <!-- 取消订单弹框 --> <view cla

  • 小程序自定义弹框效果

    本文实例为大家分享了小程序自定义弹框效果的具体代码,供大家参考,具体内容如下 wxml <!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">来点我呀</view> <!--mask--> <view class="drawer_screen" bindtap="powerD

  • 微信小程序  modal弹框组件详解

    微信小程序  modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml <modal hidden="{{hidden}}" title="这里是title" confir

  • 微信小程序实现弹出层效果

    本文实例为大家分享了微信小程序实现弹出层效果的具体代码,供大家参考,具体内容如下 先看下效果图吧 其实这个效果实现起来很简单,就是通过三目运算符来控制遮罩层的显示和隐藏 贴代码了: 规则按钮: <text class='rule' bindtap='showRule'>规则</text> 遮罩层:我这个数据是从后台拿来动态渲染到页面的 <!-- 规则提示 --> <view class="ruleZhezhao {{isRuleTrue?'isRuleS

  • 微信小程序自定义弹出模态框禁止底部滚动功能

    图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> <view class='active' bindtap="showDialogBtn">立即报名</view> </view> <!--模态框--> <!-- 遮罩层 --> <view class="mod

  • 微信小程序自定义弹出层效果

    本文实例为大家分享了微信小程序实现弹出层效果的具体代码,供大家参考,具体内容如下 效果图 WXML <view class='popup' wx:if="{{popShow}}"> <view class='mask' catchtouchmove="preventTouchMove" catchtap='closePop'> </view> <!-- 弹出层 --> <view class='popup_mai

  • 微信小程序实现弹出框提交信息

    本文实例为大家分享了微信小程序实现弹出框提交信息的具体代码,供大家参考,具体内容如下 <view class="navSm" bindtap="toolNo">       <image src="../../images/idx4.png" class="mavimg" mode="aspectFit"></image>       <view class=&qu

  • 微信小程序自定义模态框

    本文实例为大家分享了微信小程序自定义模态框的具体代码,供大家参考,具体内容如下 效果展示 可在模态框中添加图片输入框 代码展示-wxml <button class="show-btn" bindtap="showDialogBtn">弹窗</button>     <view       class="modal-mask"       bindtap="hideModal"       cat

随机推荐