文章

服务界面数据获取和展示功能实现。

Title01.png服务界面id的获取

之前在跳转到Switch界面的时候我们通过在微信界面onShow()生命周期里向后端的Sort表发送请求获取到了所有服务的信息,并将所有服务信息添加到一个列表对象:

categories:切记在申明时 单个对象位名字:{} 列表对象为对象名字:[]

data: {
    sideBarIndex: 1,
    scrollTop: 0,
    categories: [],
  },


that.setData({
          categories:res.data.data
        })

而这个categories对象包含了我们所需要的所有服务所属的大类信息以及各服务本身的信息。

而这正是我们需要的。

在xml页面展示的时候我们使用存储好的categories对象,然后在展示具体每个服务项的时候获取到展示的每个项目的id然后将该id传入js文件中待用。

代码如下:data-id="{{cargo.id}}"

<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>

Title02.png界面的跳转

在xml页面传入id后,我们可以在js文件中接收到这个id并且使用

我们选择在挑战页面的方法里边使用这个id

代码如下:

  turntoorder:function(e){
    console.log(e);
    wx.navigateTo({
      url: '/pages/order/order?id='+e.currentTarget.dataset.id,
    })
  },

关于这个e:凡是为点击事件的函数方法都有一个默认参数e,不过我们在平时的使用中很少用到这个e参数,所以日常中就不写这个e

但是这里我们需要使用xml界面中的id属性,所以在这里我们将e写出。

关于e后面那一大堆:我也不到啊,人微信官方让你这么用,管你看没看懂,用就完事了!(海皇音)

这样我们就能通过点击不同的服务区域而跳转到不同的服务介绍界面了。

License:  CC BY 4.0