E企盈营销工具技术服务商 热线:4006-838-530

封装微信小程序的页面状态控制:加载中、断网错误重试、空页面等

E企盈直播平台营销卖货系统

最近在做微信小程序,发现很多页面都有一种特点:在onLoad里异步发送HTTP请求加载数据。默认的界面是wxml中定义好的模板,如果断网或者网速较慢就会一直卡在这里,界面看起来不太友好。所以需要加入一个加载中的提示,成功加载后再切换回来。使用wx.showLoading等API无法完全遮挡后面突兀的模板,所以要在wxml中写一些界面的代码才可以完成这项需求。如果在每个page的wxml中都写一次这种代码,工作量非常大,后期重构也不方便,所以本文提供了一种使用template的方式,复用这段代码。需要切换状态的时候直接在js中一行代码pageState.xxx()即可。下面是演示图片,具体的内容可以定制,比如做一个加载动画。使用方法在需要的page的wxml文件开头加入两行代码:<!–pages/xxxxxx.wxml–><import src=”/utils/pageState/index.wxml” /><template is=”pageState” data=”{{…pageState}}” /><!– 这里是原来页面的内容 –><!– <view class=”container”> –>在需要的page的js文件中使用:import pageState from ‘这里写js文件的路径’Page({// …  getXXXXX(xxxxx) {    const pageState = pageState(this)    pageState.loading()    // 切换为loading状态    api.getXXXXX(xxxxx) // 异步请求      .then((res) => {        // 更新界面…        pageState.finish()    // 切换为finish状态      })      .catch(err => {        pageState.error()    // 切换为error状态      })  },// …模板代码wxml这里定义了模板,根据状态判断是否显示以及显示那种状态:<!– utils/pageState/index.wxml –><template name=”pageState”>  <view class=”page-state-container” wx:if=”{{state != ‘finish’}}”>    <view class=”page-state-empty page-state-center” wx:if=”{{state == ’empty’}}”>      <icon type=”info” size=”70″ />      <view class=”message”>{{message}}</view>    </view>    <view class=”page-state-loading page-state-center” wx:if=”{{state == ‘loading’}}”>      <icon type=”waiting” size=”70″ />      <view class=”message”>{{message}}</view>    </view>    <view class=”page-state-error page-state-center” wx:if=”{{state == ‘error’}}”>      <icon type=”warn” size=”70″ />      <view class=”message”>{{message}}</view>      <button class=”retrybtn” type=”warn” catchtap=”onRetry”>重试</button>    </view>  </view></template>这里使用了两个变量:state和message,表示当前的状态和提示信息。这里注意必须在使用此模板的page中定义onRetry,即异步加载数据的代码,才可以使用重试按钮。wxss接着定义样式:<!– utils/pageState/index.wxss –>.page-state-center {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  align-content: center;  height: 100%;  width: 100%;}.page-state-container {  animation: fadein 2s 1 ease-out;  height: 100%;  width: 100%;}.page-state-container~view {  display: none;}page {  height: 100%;  overflow-y: auto;}这里我设置了一个渐入的动画,删掉也没关系。注意最后一个.page-state-container~view这里是将class为page-state-container之后的view全部隐藏。如果模板之后想隐藏的不是view可以定义一个新class。我一般都用view作为container,所以这里就直接写了view。为了使内容竖直居中,我将所有页面都设置了最小高度为100%,暂时还没发现什么副作用,发现的朋友可以在评论中指出。最后把它导入到app.wxss中,以便在全局范围内使用。/**app.wxss**/@import ‘utils/pageState/index.wxss’;js// utils/pageState/index.jsconst loading = (that) => {  return () => {    that.setData({      pageState: {        state: ‘loading’,        message: ‘加载中’      }    })  }}const error = (that, message) => {  return (message = ‘请检查您的网络连接’) => {    that.setData({      pageState: {        state: ‘error’,        message      }    })  }}const empty = (that, message) => {  return (message = ‘空空如也’) => {    that.setData({      pageState: {        state: ’empty’,        message      }    })  }}const finish = (that) => {  return () => {    that.setData({      pageState: {        state: ‘finish’,        message: ”      }    })  }}export default (that) => {  return {    loading: loading(that),    error: error(that),    empty: empty(that),    finish: finish(that)  }}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 封装微信小程序的页面状态控制:加载中、断网错误重试、空页面等
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏