VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动

自定义小程序的动画框/提示框。

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

微信小程序开发专栏介绍如何自定义小程序的动画弹出框/提示框。

自定义小程序的动画框/提示框。

在小程序中,当用户与界面交互时,有一些用户反馈提示,比如触发一个按钮,从底部弹出一个框,从顶部弹出等等。

现在有一些现成的UI库,虽然已经实现了,但是如果只是为了实现一个底层的弹出框或者自定义的提示框,并没有参考第三方的UI库。

如何手动原生实现?最重要的是如何实现动画。

css3实现的动画如下:wxml代码

& lt视图& gt& ltview class = & quot点击-BTN & quot;catchtap = & quotonBottomBox & quot& gt弹出底部的弹出框

示例效果如下

掘金不支持gif-实例效果可戳链接。

以上是通过css3的动画结合@keyframes的动画帧实现的,所以在小程序中,也可以通过官方动画API实现。

小程序动画API-实现动画,创建动画实例动画,调用实例方法描述动画。最后通过动画实例的导出方法将动画数据的动画属性导出到组件中。

示例效果如下

掘金不支持gif-实例效果可戳链接。

以下是示例代码

& lt视图& gt& ltview class = & quot点击-BTN & quot;bindtap = & quotonBottomBox & quot& gt弹出底部的弹出框

如下面的代码所示

//pages/customalertbox/customalertbox . jspage(初始数据{/* * * page */data: {isbotom: false,istop: false,animationdata: {},//定义动画对象},/* * *生命周期函数--监控页面加载*/onload: function (options) {},onbottobox(){//创建动画Varanimation = wx。创建动画({时长:2000,计时功能:&;#39;轻松& amp#39;, });this.animation = animation//先在Y轴上偏移180°,然后用step()完成一个动画。平移y (180)。step();this . setdata({ animation data:animation . export(),isBottom: true,});//设置setTimeout改变Y轴偏移量,实现可感知滑动,返回初始位置setTimeout(()= & gt;{ animation.translateY(0)。step();this . setdata({ animation data:animation . export(),});}, 200);},//单击蒙版图层隐藏hidebox () {Varanimation = wx上的项目符号框。创建动画({时长:2000,计时功能:&;#39;轻松& amp#39;, });this.animation = animation//先在Y轴上偏移180°,然后用step()完成一个动画。平移y (180)。step();this . setdata({ animation data:animation . export(),});setTimeout(()= & gt;{ animation.translateY(0)。step();this . setdata({ animation data:animation . export(),isBottom: false,});}, 200);},onTopBox(){ this . setdata({ isTop:true,});setTimeout(()= & gt;{ this.setData({ isTop: false,});}, 2000);},});以上是通过微信小程序中的动画API实现的动画,代码比css3多,可以实现更复杂的动画效果。

注意

如果是一个底部的弹出框,如果在里面拖动时蒙版层的底部会滚动,具体的解决方法也可以是添加catchtouchmove = & quottrue & quot可以解决

& lt视图& gt& ltview class = & quot点击-BTN & quot;bindtap = & quotonBottomBox & quot& gt弹出底部的弹出框

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:自定义小程序的动画框/提示框。 https://zhujicankao.com/121037.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 自定义小程序的动画框/提示框。
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!