小程序 如何制作页面跳转加载动画?

小程序 如何制作页面跳转加载动画?,第1张

跳转的方法写成函数,然后函数执行第一行就调用这个 loading 状态为 true 然后写跳转的地址 跳转地址侍源后面改变这个 loading 状态为false

比如:

onClick(){

this.loading = true

window.location.href = 'www.baidu.com'

this.loading = false

}

其实这里的这个加载状态一直都是在页面上有写上去的 只是隐藏掉老轮态了桐卖 然后通过方法触发它就可以了的 希望能帮到你 我不是做小程序的 所以我并不清楚代码如何实现 只是有一点思路而已

        小程序和html页面有点不同,主要是使用js来实现动画效果,因为小程序自身有提供一种改孝察方式:wx.createAnimation(OBJECT),它创建一个动画实例 animation ,通过调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性,step()来停止动画,step() 表示一组动画完成。

我们主要用wx:createAnimation({})来设置一些参数,例如持续时间、延时、加载方式等,用export()来开启动画,在页面上调用animation=”{{动画名称}}”。具体步骤:

1)创建动画对象并设置有效参数==>wx:createAnimation({参核茄数:有效值})

2)创建一组动画,调用step()来表示一组动画的完成==>动画对象.动画效果.step()

3)在data中设置一个对象vip_animal(自己随意慎瞎命名),用该对象开启动画==>this.setData({vip_animal: animation.export()})

4)在页面上调用动画对象==>animation="{{vip_animal}}"

例子:淡入淡出动画效果(当淡入动画生效后1.5s,淡出动画开始生效)

在wxml上调用animation="{{vip_animal}}"来显示

如果需要设置循环效果。我们可以设置:(setAnimation为)

另一种方式:

在wxml上调用style="{{style_img}}"来显示

首先电脑打开并登录微信。

左侧点击小程序面板按钮;其中包含最近使用和我的小程序,点击向下三角可显示更多;打开并进入小程序鼠标点击进行使用即可;需要关闭退出小程序,点击右上角按钮。

微信小友胡颂程序,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。好郑全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序。微做和信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12217835.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存