小程序开发（5）-列表页根据数据动态调整样式

浅浅的花香味﹌ 2023-07-18 02:38 23阅读 0赞

前面4篇文章，我们从零开始，做了一个列表跳转详情页的小程序。

下面我们将花一些时间，把这个demo完善一下。

目前完善的思路主要包括一下内容：

1.  格式化数据以及样式根据状态动态调整
2.  实现上拉加载更多的功能
3.  使用vuex管理状态
4.  使用flyIO从服务端获取数据并加载

## 格式化数据 ##

为了更好的复用服务端的接口，因此我们请求返回的数据中，状态字段可能是数字或者其他字符。如果直接加载到页面，是这个样子的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70]

之前的教程中，我们了解到很多vue中的\{ \{\}\}函数，均无法在小程序中进行使用，那么我们如何格式化返回的数据呢？

### 简单状态–三目表达式 ###

如果我们的状态比较简单，我们可以直接在组件初始化的位置，通过三目表达式的形式格式化返回的数据

:value="item.value==3?'审批通过':item.value==2?'正在审批':'未提交审批'"

![在这里插入图片描述][20200325103948547.png]

### 复杂状态-建议在wx.request方法中转换 ###

在与后台服务端进行数据获取时，一般是通过wx.request方法实现的。当数据load以后，可以转换后再set给页面定义的数组中。

req.getUserEffectLog(start).then(res=>{
      let tempList=[];
      res.result.forEach(function(item,index){
        tempList[index]={};
        tempList[index].remarks = item.remarks;
        tempList[index].type = item.type;
        tempList[index].date = time.toDate(item.createTime, false);
        tempList[index].effectNum = item.effectNum;
      })
      this.setData({
        detailList: tempList
      })
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70]: /images/20230528/85bbf4bf706e4ce89402c9ba9e079181.png
[20200325103948547.png]: /images/20230528/96e80a2606d4406ea0ca439ffd1e22c3.png