数据的获取

在聊具体数据的获取之前，我想我们需要谈谈一个小小的概念——小程序界面的生命周期。

当然也不会在这里全部说完我们只谈今天我们会用到的一个生命周期——onShow()，顺便说说它和onLoad()的区别。

对其的解释如下：

在微信小程序的开发过程中，经常用到很多生命周期函数，在这里介绍一下 ，onLoad() 和 onShow() 的区别：

onLoad() ： 在页面加载的时候触发，只会调用一次，在onLoad() 函数中，可以通过 option获取当前页面路径中的参数。

onShow()： 在页面显示时调用，也就是切换页面的时候，或者切入前台的时候触发，可以多次触发。

而我们的页面展示需要在每次页面显示的时候都要展示，所以我们在onShow()方法里边调用

代码如下：

 onShow() {
    let user = wx.getStorageSync('user')
    console.log(user);

    let that = this
    wx.request({
      url: 'http://localhost:11000/api/sort',
      method:'get',
      header: {
        'content-type': 'application/json', // 默认值
        'token':user.token
      },
      success (res) {
        that.setData({
          categories:res.data.data
        })
        console.log(res.data)
      },
      fail(err){
        console.log(err);
      }
    })  
  },

这玩意已经很熟悉了一个wx：request()

将请求到的数据加入categories对象中用于在xml页面展示。

展示的具体逻辑

主要是说一说Switch界面的展示逻辑。

因为我们在Switch界面使用了T-design的侧边栏控件。

如下这个侧边栏分为了侧边的类目选项和各类目下的服务展示项

所以我们需要两个部分展示：

第一部分（一个循环）：在侧边栏循环读取出来的Sorts表格（大类）：

<t-side-bar value="{{sideBarIndex}}" bind:change="onSideBarChange">
    <t-side-bar-item
      wx:for="{{categories}}"
      wx:key="index"
      value="{{item.value || index}}"
      label="{{item.name}}"
      disabled="{{item.disabled}}"
      badge-props="{{item.badgeProps}}"
    />
  </t-side-bar>

第二部分（嵌套循环）：循环Sort表的基础下再在具体内容里循环各大类下边包含的所有细分服务项目：

  <view class="content" style="transform: translateY(-{{sideBarIndex * 100 + '%'}})">
    <scroll-view
      wx:for="{{categories}}"
      wx:key="index"
      class="section"
      scroll-y
      scroll-top="{{scrollTop}}"
      scroll-with-animation
      show-scrollbar="{{false}}"
    >
      <view class="title">{{item.title || item.label}}</view>
      <t-cell-group>
        <block wx:for="{{item.list}}" wx:key="index" wx:for-item="cargo">
          <t-cell title="{{cargo.name}}" bind:tap="turntoorder" data-id="{{cargo.id}}">
            <t-image shape="round" src="{{cargo.image}}" slot="image" lazy t-class="image" />
          </t-cell>
        </block>
      </t-cell-group>
    </scroll-view>
  </view>

因为在后续服务内容的展示时使用到了两个wx：for (循环完默认用于循环的对象名为item)，为了防止第二个循环的item和第一个循环完的item冲突，所以我们在第二个循环这里加上wx：for-item（）将第二个循环的形目名改为cargo，这样即完美解决两个循环item冲突的问题。

如此便将获取到的数据完美展示在Switch界面中。

order界面的展示同理如上：

1.发送请求

2.将数据给到对象

3.在xml界面使用对象.的方式展示具体内容。