两种实现加载中效果的方法

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：微信小程序教程 微信小程序api

1. 使用CSS3动画：通过设置一个旋转的加载图标，并使用CSS3的animation属性实现旋转动画效果。这种方法简单易用，兼容性较好，但自定义程度较低。 2. 使用JavaScript和HTML5：通过创建一个canvas元素，并在其中绘制一个动态变化的图形（如波浪线），然后使用JavaScript控制其运动轨迹，实现类似loading的效果。这种方法可以实现高度自定义的加载效果，但兼容性较差，且需要编写较多的JavaScript代码。

方法一

直接在代码里控制，在wxml文件里布局弹窗loading层，利用条件渲染，在js代码里控制是否显示loading层。

文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html?t=20161107#wxshowtoastobject

js代码

showLoading:function(){wx.showToast({title:'加载中',icon:'loading'});},cancelLoading:function(){wx.hideToast();}

方法二

在wxml文件里布局弹窗，利用条件渲染，在js代码里控制是否显示

文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html?t=20161107

wxml代码

<view><loadingwx:if="{{showLoading}}">加载中</loading></view>

js

data:{showLoading:true},showLoading:function(){this.setData({showLoading:true})},cancelLoading:function(){this.setData({showLoading:false})