微信小程序实战之自定义抽屉菜单(7)

前端之家收集整理的这篇文章主要介绍了微信小程序实战之自定义抽屉菜单(7)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信提供了动画api,就是下面这个

相关链接nofollow" target="_blank" href="https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject">https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject

通过使用这个创建动画的api,可以做出很多特效出来

下面介绍一个抽屉菜单的案例

实现代码: wxml:

Box" wx:if="{{showModalStatus}}"> 菜单1 菜单2 菜单3 菜单4 菜单5

wxss:

Box { width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 1001; background: #fff; } .drawer_content { padding: 20rpx 40rpx; height: 470rpx; overflow-y: scroll; } .drawer_title{ padding:20rpx; font:42rpx "microsoft yahei"; text-align: center; } .line{ border-bottom: 1px solid #f8f8f8; }

js:

// 第2步:这个动画实例赋给当前的动画实例
this.animation = animation;

// 第3步:执行第一组动画:Y轴偏移240px后(盒子高度是240px),停
animation.translateY(240).step();

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

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

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

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

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

原文链接:https://www.f2er.com/weapp/39904.html

猜你在找的微信小程序相关文章