一号网站建设网站制作,基层建设 网站,抖音代运营服务合同,网站建设的一般流程是怎样的前言在我们做项目的使用常常会使用条件渲染去有选择的给用户展示相关页面#xff0c;如果渲染的数据或场景比较多比较复杂#xff0c;那么往往需要3、4s的时间去完成#xff0c;用户点击了之后就会陷入3、4s的空白期#xff0c;并且这段时间屏幕是处于一种”未响应“的状态…前言在我们做项目的使用常常会使用条件渲染去有选择的给用户展示相关页面如果渲染的数据或场景比较多比较复杂那么往往需要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动画放在下面了这个是参考一个博主的修改了主色调!-- 弹出层 --
van-popup show{{ popShow }} positiontop custom-styleheight: 300rpx; round!-- loading盒子用来装loading动画的 --view classloadingBox stylemargin-top: 200rpx;view classloader-dotsview/viewview/viewview/viewview/viewview/view/view/view
/van-popup.loader-dots view{width: 40rpx;height: 40rpx;background: brown;border-radius: 30%;display:inline-block;animation: slide 1s infinite;}
.loader-dots 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 bottom right,rgb(155, 55, 55),#FFFFFF)
}
.loader-dots view:nth-child(4){animation-delay:.4s;background: linear-gradient(to bottom right,rgb(145, 55, 55),#FFFFFF)
}
.loader-dots view:nth-child(5){animation-delay:.5s;background:linear-gradient(to bottom right,rgb(135, 55, 55),#FFFFFF)
}
keyframes slide{
0%{transform: scale(1)
}
50%
{opacity:0.3;transform:scale(2);
}
100%{transform: scale(1)
}若渲染数据较大或增加loading的时间需使用延迟函数setTimeout除了上诉情况我们也可以在登录页面的跳转的时候添加这个loading动画。使用setTimeout的好处一方面是可以等待数据全部渲染完成后再展示给用户从而避免了数据残留以及数据错位的情况另一方面则是可以自主设置最短loading动画的时间。例如上图虽然渲染完全部的数据只花了几毫秒但是为了稍微的延迟登录时间我将setTimeout的时间参数调整到了10001s。我将所有代码放在下面了需要的自取~!-- wxml --
!-- 原始内容层 --
view classboxvan-divider contentPositioncenter customStylecolor: grey; border-color: grey; font-size: 36rpx; width: 90% ; margin-left:40rpx ; margin-right:40rpx ; margin-top:150rpx团团活动管理/van-dividerbutton bindtapgoIndex classbutton_location stylewidth: 450rpx; height: 100rpx text stylefont-size: 36rpx; float: left; margin-left: 80rpx;用户端登录/textvan-icon namefriends-o size60rpx custom-styleheight:60rpx; margin-top:15rpx;//buttonbutton bindtapgoNext classTeacherbutton_location stylewidth: 450rpx; height: 100rpx text stylefont-size: 36rpx; float: left; margin-left: 80rpx;审批端登录/textvan-icon namemanager-o size60rpx custom-styleheight:60rpx; margin-top:15rpx;/ /button!-- 右下角的图书和提示字 --view stylewidth: 140rpx;height: 180rpx;position: absolute; right: 40rpx; bottom: 70rpx; bindtaplookGuideview stylewidth: 140rpx;height: 40rpx; font-size: 28rpx; text-align: center; font-weight: 700; color: brown;手册及日志/viewimage src../../icon/guide.png stylewidth: 140rpx;height: 140rpx;/image/viewvan-divider contentPositioncenter customStylecolor: grey; border-color: grey; font-size: 36rpx; width: 90% ; position: absolute;margin-left:40rpx ; margin-right:40rpx ; bottom:0pxCopyright© STU引力弹簧工作室/van-divider
/view
!-- 遮罩层 --
van-overlay show{{ show }} z-index2view classwrapperview classloginview classloginHeadimage src../../icon/tuantuan.png classtuantuan/imageview classcrossvan-icon namecross size40px custom-styleposition:relative; margin-top:20rpx; margin-left:80rpx bindtaponClickHide//view/viewview classloginBodyvan-dividercontentPositionleftcustomStylecolor: grey; border-color: grey; font-size: 36rpx; width: 520rpx ; position:relative; padding-top:80rpx; padding-left:40rpx; Account/van-dividerinput bindinputgetAccount classinputborder1 placeholder输入账号/inputvan-dividercontentPositionleftcustomStylecolor: grey; border-color: grey; font-size: 36rpx; width: 520rpx ; position:relative; padding-left:40rpx;Password/van-dividerinput classinputborder2 typepassword placeholder输入密码 value{{password}} bindinputgetPassWord/input view bindtapgoRegister classgoRegister注册账号/viewview bindtapgoRetrieve classgoRetrieve忘记密码/view/viewview classloginFeetview classloginButtonbutton bindtapenterIndex stylewidth: 88%;border-radius: 40rpx;background-color: #D43030; color:#FFFFFF;box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);登录/button/viewimage src../../icon/client-side.png classclient-side/image/view/view/view!-- 由于不显示导航栏故loading盒子需要修改margin-top值 --van-popup show{{ popShow }} positiontop custom-styleheight: 300rpx; roundview classloadingBox stylemargin-top: 200rpx;view classloader-dotsview/viewview/viewview/viewview/viewview/view/view/view /van-popup
/van-overlay const db wx.cloud.database()
Page({data: {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.setData({ show: false });},//点击登录enterIndex(){let that thislet account this.data.accountlet password this.data.passworddb.collection(studentUser).where({account:account}).get({}).then(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) {var password e.detail.value;this.setData({password: password})},//进入注册界面goRegister(){wx.navigateTo({url: ../closeRegister/closeRegister,})},//进入找回账号密码页面goRetrieve(){wx.navigateTo({url: ../retrieve/retrieve,})}
}){//jsonusingComponents: {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
}当前页面的CSS
text{padding-right: 10px;
}
.loginHead{width: 100%;height: 160rpx;
}
.cross{float: right;width: 160rpx;height: 120rpx;padding-top: 40rpx;padding-right: 40rpx;
}
/* 团团图片样式 */
.tuantuan{width: 160rpx;height: 120rpx;padding-top: 40rpx;padding-left: 40rpx;
}
.loginBody{width: 100%;height: 700rpx;
}
.loginFeet{width: 100%;height: 300rpx;
}/* 遮罩层内嵌盒子包装层 */
.wrapper {display: flex;align-items: center;justify-content: center;height: 100%;}
/* 遮罩层内嵌盒子内容层 */
.login{background-color: #FFFFFF;width: 600rpx;height: 1200rpx;border-radius: 40rpx;
}
/* 输入账号的input */
.inputborder1{margin-left: 40rpx;margin-right:40rpx;margin-bottom: 30rpx;padding-top: 30rpx;padding-bottom: 30rpx;padding-left: 30rpx;padding-right:30rpx;border-radius: 20rpx;border: 2rpx solid #F2E6E6;box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);
}
/* 输入密码的input */
.inputborder2{margin-left: 40rpx;margin-right:40rpx;margin-bottom: 30rpx;padding-top: 30rpx;padding-bottom: 30rpx;padding-left: 30rpx;padding-right:30rpx;border-radius: 20rpx;border: 2rpx solid #F2E6E6;box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);
}
/* button在wxss里面修改不了宽度和高度故在wmxl里面添加style属性来实现 */
.loginButton{position: relative;padding-top: 100rpx;}.goRegister{position: relative;top: 5rpx;float: right; right: 40rpx; font-family: Franklin Gothic Medium, Arial Narrow, Arial, sans-serif;
}
.goRetrieve{position: relative;top: 5rpx; left: 40rpx;float: left; font-family: Franklin Gothic Medium, Arial Narrow, Arial, sans-serif;
}
.client-side{width: 120rpx;height: 80rpx;float: right;margin-top:10rpx ;margin-right:20rpx;
}总页面的CSS
/* choicePage 和 nextChoice的两个按钮 */
.Teacherbutton_location{margin-top: 20rpx;border-radius: 80rpx;color:black;background-color: #FFFFFF;box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);border: 2rpx solid brown;
}
.button_location{border-radius: 80rpx;margin-top: 420rpx;color:#FFFFFF;background-color: #D43030;box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);border: 2rpx solid #FFFFFF;
}
/* 无数据时显示的图片和文字格式 */
.noData{height: 700rpx;width: 100%;position: absolute;top: 200rpx;left: 0px;margin-top: 50rpx;
}
.fail{height: 700rpx;width: 100%;position: absolute;top: 100rpx;margin-top: 50rpx;
}
.tip{position: relative;margin-top: 800rpx;font-size: 36rpx;color:gray;text-align: center;
}
/* 所有状态标签的样式 */
.state_0{float: right;width: 160rpx;height: 80rpx;background-color:#FFC300;border-radius: 0 30rpx 0 30rpx;
}
.state_1{width: 160rpx;height: 80rpx;background-color:#43CF7C;border-radius: 0 30rpx 0 30rpx;z-index: 2;
}
.state_2{width: 160rpx;height: 80rpx;background-color:#FF5733;border-radius: 0 30rpx 0 30rpx;z-index: 2;
}
.state_4{float: right;width:160rpx;height:80rpx;background-color:#CCCCCC;border-radius:0 30rpx 0 30rpx;z-index: 2;flex-direction: row;position: relative;margin-left: 40rpx;
}
/* 用来装标签的盒子 */
.state_content{position: relative;margin-top:20rpx ;margin-left: 30rpx;font-size: 30rpx;color: white;
}
/* 预约老师和申请活动的盒子 */
.mine_application{margin-left: 50rpx;margin-right: 50rpx;
}
.mine_application_title{height: 90rpx;border-bottom: 5rpx solid #A6A6A6;font-size: 56rpx;font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
}
.mine_application_content{height: 300rpx;width: 100%;display: flex;position: relative;box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.1);margin-top: 40rpx;border-radius:30rpx;background-color: rgb(252, 252, 252);border: 1rpx solid rgb(210, 210, 210);
}
.mine_appointment_title{height: 90rpx;border-bottom: 5rpx solid #A6A6A6;font-size: 56rpx;font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
}.mine_appointment_content{height: 500rpx;width: 100%;display: flex;position: relative;box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.1);margin-top: 30rpx;border-radius: 30rpx;background-color: rgb(252, 252, 252);border: 1rpx solid rgb(210, 210, 210);
}
/* 活动的具体样式 */
.event{font-size: 40rpx;font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;position: relative;margin:30rpx;width: 90%;flex: 1;
}
.eventTime{margin-top: 10rpx;font-size: 28rpx;color: #A0A9BD;
}
/* loading盒子的样式 */
.loadingBox{margin-top: 60rpx;padding-left: 260rpx;
}
.loader-dots view{width: 40rpx;height: 40rpx;background: brown;border-radius: 30%;display:inline-block;animation: slide 1s infinite;}
.loader-dots 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 bottom right,rgb(155, 55, 55),#FFFFFF)
}
.loader-dots view:nth-child(4){animation-delay:.4s;background: linear-gradient(to bottom right,rgb(145, 55, 55),#FFFFFF)
}
.loader-dots view:nth-child(5){animation-delay:.5s;background:linear-gradient(to bottom right,rgb(135, 55, 55),#FFFFFF)
}
keyframes slide{
0%{transform: scale(1)
}
50%
{opacity:0.3;transform:scale(2);
}
100%{transform: scale(1)
}
}
结语如果有疑问欢迎大家留言讨论你如果觉得这篇文章对你有帮助可以给我一个免费的赞吗我们之间的交流是我最大的动力
