【小程序】微信小程序animation实现列表滑动展示效果

• Z时代
• 2024-01-10
• 分类：技术分享

option:{
duration: 100, // 动画执行时间
timingFunction: 'ease-in'  // 动画执行效果
}

.commonInner {
height:0;
overflow:  hidden;
}

open:function(){
let me=this;
var box = wx.createAnimation(me.data.option);//初始化animation
let hei=40*4;//可设置动态获取高度
box.height(hei).step();//设置动画效果
me.setData({
inner: box.export(),
openFlag:true//判断当前状态（展开/收起）
})
}

close: function () {
let me = this;
var box = wx.createAnimation(me.data.option);
box.height(0).step();
me.setData({
inner: box.export(),
openFlag: false
})
}

需求：
实现如下效果

实现：
定义参数

option:{
duration: 100, // 动画执行时间
timingFunction: 'ease-in'  // 动画执行效果
}

定义animation

设置初始不展示：

.commonInner {
height:0;
overflow:  hidden;
}

展开方法：

open:function(){
let me=this;
var box = wx.createAnimation(me.data.option);//初始化animation
let hei=40*4;//可设置动态获取高度
box.height(hei).step();//设置动画效果
me.setData({
inner: box.export(),
openFlag:true//判断当前状态（展开/收起）
})
}

收起方法：

close: function () {
let me = this;
var box = wx.createAnimation(me.data.option);
box.height(0).step();
me.setData({
inner: box.export(),
openFlag: false
})
}

代码地址： https://github.com/myweiwei/s...
将不断更新完善，期待您的批评指正！

以上是 【小程序】微信小程序animation实现列表滑动展示效果 的全部内容， 来源链接： utcz.com/a/106904.html