VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动
华纳云最新优惠促销活动

实现自定义小程序的动画弹出框/提示框。

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

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

实现自定义小程序的动画弹出框/提示框。

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

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

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

css3的动画如下:wxml代码

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

效果示例如下所示。

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

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

小程序动画API-实现动画,创建动画实例,调用实例的方法描述动画。最后,动画数据由动画实例的导出方法导出,并传递给组件的animation属性。

效果示例如下所示。

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

下面是示例代码

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

如下面的代码所示

//pages/customalertbox/customalertbox . jspage({/* *页面初始数据*/data: {isbotom: false,istop: false,动画数据:{},//定义动画对象},/* * *生命周期函数--监听页面加载*/onload: function (options) {},onbottombox(){//创建动画varanimation = wx . Create animation({ duration:2000,计时函数: # 39;安逸 # 39;, });this.animation = animation//先在Y轴上偏移180°,然后用step()完成一个动画。平移y (180)。step();this . setdata({ animation data:animation . export(),isBottom: true,});//设置setTimeout改变Y轴偏移量,实现有感觉的滑动,返回初始位置setTimeout(()= >;{ animation.translateY(0)。step();this . setdata({ animation data:animation . export(),});}, 200);},//点击蒙版图层隐藏子弹框on hide box(){ var animation = wx . create animation({ duration:2000,计时功能: # 39;安逸 # 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 = 在外层。true 是可以解决的。

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

这是自定义实现小程序的动画项目符号框/提示框的详细信息。请多关注主机参考其他相关文章!

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

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

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 实现自定义小程序的动画弹出框/提示框。
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!