微信小程序底部弹框动画(小案例)

wxml 代码

< view class= 'text' bindtap= 'chooseSezi'>请选择：商品 </ view >

<!--隐藏区域 -->

< view class= 'maskLayer' wx:if= "{{chooseSize}}" bindtap= 'hideModal'> 点击隐藏 </ view >

< view class= 'choose' wx:if= "{{chooseSize}}" animation= '{{animationData}}'>

这里面是内容

</ view >

wxss代码

.text {

width: 100%;

position: relative;

height: 100 rpx;

top: 800 rpx;

line-height: 100 rpx;

border: 1px solid #ccc;

}

.maskLayer {

position: relative;

top: -93 rpx;

width: 100%;

height: 60 rpx;

border: 1px solid #ccc;

}

.choose {

width: 100%;

height: 500 rpx;

background-color: skyblue;

}

js 代码

Page({

/**

* 页面的初始数据

*/

data: {

chooseSize: false,

animationData: {}

},

chooseSezi: function(e) {

// 用that取代this，防止不必要的情况发生

var that = this;

// 创建一个动画实例

var animation = wx.createAnimation({

// 动画持续时间

duration: 500,

// 定义动画效果，当前是匀速

timingFunction: 'linear'

})

// 将该变量赋值给当前动画

that.animation = animation

// 先在y轴偏移，然后用step()完成一个动画

animation.translateY( 500).step()

// 用setData改变当前动画

that.setData({

// 通过export()方法导出数据

animationData: animation.export(),

// 改变view里面的Wx：if

chooseSize: true

})

// 设置setTimeout来改变y轴偏移量，实现有感觉的滑动

setTimeout( function () {

// 230 移动的距离

animation.translateY( 230).step()

that.setData({

animationData: animation.export()

})

}, 200)

},

// 隐藏

hideModal: function(e) {

var that = this;

var animation = wx.createAnimation({

duration: 1000,

timingFunction: 'linear'

})

that.animation = animation

animation.translateY( 500).step()

that.setData({

animationData: animation.export()

})

setTimeout( function () {

animation.translateY( 0).step()

that.setData({

animationData: animation.export(),

chooseSize: false

})

}, 1000)

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

微信小程序文档https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html

仿照原创博客所写,感谢原创(https://www.cnblogs.com/chinabin1993/p/7605764.html)