需要3、4s的时间去完成用户点击了之后就会陷入3、4s的空白期并且这段时间屏幕是处于一种”未响应“的状态用户并不知道自己是否点击生效了。

这篇文章主要是介绍一种让条件渲染展示页面更丝滑的方法这样能大大提高用户的体验。

效果图在渲染还未完成时展现loading动画给用户这个看上去是在多个页面进行跳转实则是只有一个页面不过是用了条件渲染和loading动画让用户感觉自己跳转了页面。

这里就不具体介如何使用条件渲染来将多个页面整合成一个页面了我之前的博客有详细的描述https://blog.csdn.net/Zchengjisihan/article/details/129016013?spm1001.2014.3001.5501。

这篇博客我们将重点放在loading动画上。

核心思想使用外部组件库的vant-weapp的Popup组件使用CSS的animation动画使用JS的setTimeout来等全部数据渲染完成后再隐藏loading动画vant-weapp的Popup组件我使用的是样式是从上方弹出并且是圆角的形式你可以根据自己的需求来调整从哪个方向弹出是否显示

等等这些Popup组件支持的api你均可以在官方文档下找的到在这我就不赘述了在Popup上添加loading样式这里需要用到相关CSS的animation知识如果你想换个更炫酷的loading动画可以直接在相关网站上搜索很多源码的。

我把自己的loading动画放在下面了这个是参考一个博主的修改了主色调!--

弹出层

classloader-dotsview/viewview/viewview/viewview/viewview/view/view/view

view{width:

30%;display:inline-block;animation:

slide

view:nth-child(1){animation-delay:.1s;

.loader-dots

view:nth-child(2){animation-delay:.2s;

.loader-dots

view:nth-child(3){animation-delay:.3s;background:

linear-gradient(to

view:nth-child(4){animation-delay:.4s;background:

linear-gradient(to

view:nth-child(5){animation-delay:.5s;background:linear-gradient(to

bottom

{opacity:0.3;transform:scale(2);

100%{transform:

}若渲染数据较大或增加loading的时间需使用延迟函数setTimeout除了上诉情况我们也可以在登录页面的跳转的时候添加这个loading动画。

使用setTimeout的好处一方面是可以等待数据全部渲染完成后再展示给用户从而避免了数据残留以及数据错位的情况另一方面则是可以自主设置最短loading动画的时间。

例如上图虽然渲染完全部的数据只花了几毫秒但是为了稍微的延迟登录时间我将setTimeout的时间参数调整到了10001s。

我将所有代码放在下面了需要的自取~!--

wxml

margin-top:150rpx团团活动管理/van-dividerbutton

bindtapgoIndex

margin-top:15rpx;//buttonbutton

bindtapgoNext

bindtaponClickHide//view/viewview

classloginBodyvan-dividercontentPositionleftcustomStylecolor:

grey;

placeholder输入账号/inputvan-dividercontentPositionleftcustomStylecolor:

grey;

padding-left:40rpx;Password/van-dividerinput

classinputborder2

classgoRetrieve忘记密码/view/viewview

classloginFeetview

classclient-side/image/view/view/view!--

由于不显示导航栏故loading盒子需要修改margin-top值

--van-popup

classloader-dotsview/viewview/viewview/viewview/viewview/view/view/view

/van-popup

{popShow:false,show:false,password

:,account

:},goNext(e){console.log(点击了审批端登录)wx.navigateTo({url:

../nextChoice/nextChoice,})},goIndex(e){console.log(点击了用户登录)//显示用户端的遮罩层this.setData({show:true})},//

隐藏遮罩层onClickHide()

this.data.passworddb.collection(studentUser).where({account:account}).get({}).***n(res{console.log(查询数据库成功,res.data)if(password

res.data[0].password){console.log(登录成功)this.setData({popShow:true})setTimeout(()

{wx.switchTab({url:

../index/index,success(){that.setData({popShow:false})}})},

1000);}else{console.log(登录失败)wx.showToast({title:

登录失败账号或密码不正确,icon

none})}}).catch(res{wx.showToast({title:

登录失败账号或密码不正确,icon

none})})},//获取输入的账号getAccount(e){this.setData({account

e.detail.value})},//获取输入的密码getPassWord:

function(e)

e.detail.value;this.setData({password:

password})},//进入注册界面goRegister(){wx.navigateTo({url:

../closeRegister/closeRegister,})},//进入找回账号密码页面goRetrieve(){wx.navigateTo({url:

{van-icon:

vant/weapp/icon/index,van-overlay:

vant/weapp/overlay/index,van-divider:

vant/weapp/divider/index,van-popup:

vant/weapp/popup/index},navigationStyle:

custom

40rpx;margin-right:40rpx;margin-bottom:

30rpx;padding-top:

30rpx;padding-right:30rpx;border-radius:

20rpx;border:

40rpx;margin-right:40rpx;margin-bottom:

30rpx;padding-top:

30rpx;padding-right:30rpx;border-radius:

20rpx;border:

button在wxss里面修改不了宽度和高度故在wmxl里面添加style属性来实现

relative;top:

.Teacherbutton_location{margin-top:

20rpx;border-radius:

80rpx;color:black;background-color:

#FFFFFF;box-shadow:

.button_location{border-radius:

80rpx;margin-top:

420rpx;color:#FFFFFF;background-color:

#D43030;box-shadow:

80rpx;background-color:#FFC300;border-radius:

30rpx

80rpx;background-color:#43CF7C;border-radius:

30rpx

80rpx;background-color:#FF5733;border-radius:

30rpx

right;width:160rpx;height:80rpx;background-color:#CCCCCC;border-radius:0

30rpx

.mine_application_title{height:

90rpx;border-bottom:

.mine_application_content{height:

300rpx;width:

40rpx;border-radius:30rpx;background-color:

rgb(252,

.mine_appointment_title{height:

90rpx;border-bottom:

}.mine_appointment_content{height:

500rpx;width:

30%;display:inline-block;animation:

slide

view:nth-child(1){animation-delay:.1s;

.loader-dots

view:nth-child(2){animation-delay:.2s;

.loader-dots

view:nth-child(3){animation-delay:.3s;background:

linear-gradient(to

view:nth-child(4){animation-delay:.4s;background:

linear-gradient(to

view:nth-child(5){animation-delay:.5s;background:linear-gradient(to

bottom

{opacity:0.3;transform:scale(2);

100%{transform:

结语如果有疑问欢迎大家留言讨论你如果觉得这篇文章对你有帮助可以给我一个免费的赞吗我们之间的交流是我最大的动力