前端列表重复项更好的写法（一堆长得一样，内容不同的数据项）

前端列表重复项更好的写法（一堆长得一样，内容不同的数据项）

写前端我们常常会遇到写卡片列表需求

• 像下图，有一堆长得一模一样的卡片，你会怎么写？
• （当然用组件化开发的方式把它写成组件也是不错的）

后文用的是微信小程序的语法，但这不是重点，你也可以基于这种方式用 vue 的语法来写

无脑写法

如果我们写完一个直接复制几遍，乍一看没啥问题，但却是很不利于维护的

而且常规情况下静态 demo 后续肯定是要改成数据动态渲染的

• 后续调整结构的时候需要一个个改（比如删减展示字段、调整卡片内容）
• 调整页面其他内容时，代码过长，定位目标代码有点麻烦
• 后续对接接口数据的时候，需要把写了半天的这些 demo 全部删除，只留一个

<view class="card">
    <view class="card-title">婺城区2021年土地出让手册</view>
    <image class="card-cover-image" src="../../images/cover-image.png" mode="widthFix"></image>
    <view class="card-descript">本期手册共收录15宗地块，共计9999亩。</view>
    <view class="card-date">更新时间：2021年6月16日</view>
</view>

<view class="card">
    <view class="card-title">婺城区2021年土地出让手册</view>
    <image class="card-cover-image" src="../../images/cover-image.png" mode="widthFix"></image>
    <view class="card-descript">本期手册共收录15宗地块，共计9999亩。</view>
    <view class="card-date">更新时间：2021年6月16日</view>
</view>

<view class="card">
    <view class="card-title">婺城区2021年土地出让手册</view>
    <image class="card-cover-image" src="../../images/cover-image.png" mode="widthFix"></image>
    <view class="card-descript">本期手册共收录15宗地块，共计9999亩。</view>
    <view class="card-date">更新时间：2021年6月16日</view>
</view>

<view class="card">
    <view class="card-title">婺城区2021年土地出让手册</view>
    <image class="card-cover-image" src="../../images/cover-image.png" mode="widthFix"></image>
    <view class="card-descript">本期手册共收录15宗地块，共计9999亩。</view>
    <view class="card-date">更新时间：2021年6月16日</view>
</view>

<!-- ... -->

取巧一点的写法

我们可以直接用循环的方式去遍历几个 demo 出来，先把结构样式定下来，改一个全部生效，能达到同样的占位效果

<view class="card" wx:for="{{[1,2,3,4]}}" wx:key="item">
    <view class="card-title">婺城区2021年土地出让手册</view>
    <image class="card-cover-image" src="../../images/cover-image.png" mode="widthFix"></image>
    <view class="card-descript">本期手册共收录15宗地块，共计9999亩。</view>
    <view class="card-date">更新时间：2021年6月16日</view>
</view>

进阶写法

要让每个卡片 demo 内容不同

• 建议先按上述写法调整完结构、写好样式
• 再把这个循环遍历的对象改成一个变量，简单设计下数据结构，把需要动态渲染的内容渲染成变量

xxx.js

/* ... */
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    cardData: [
      {title: '婺城区2021年土地出让手册', img: 'http://www.xxx.com/static/images/cover-image.png', descript: '本期手册共收录15宗地块，共计9999亩。', date: '2021年6月16日'},
      {title: '婺城区2020年土地出让手册', img: 'http://www.xxx.com/static/images/cover-image2.png', descript: '本期手册共收录10宗地块，共计6688亩。', date: '2020年6月12日'},
    ]
  }
})

xxx.wxml

<view class="card" wx:for="{{cardData}}" wx:key="item">
    <view class="card-title">{{item.title}}</view>
    <image class="card-cover-image" src="{{item.img}}" mode="widthFix"></image>
    <view class="card-descript">{{item.descript}}</view>
    <view class="card-date">更新时间：{{item.date}}</view>
</view>

后续调整结构依然简单，只需要调整这个“模板”卡片和对应的数据结构即可

• 而复制的做法则需要一个个改结构、或者删掉多余的复刻版，改好模板再复制一遍，再写个性化数据

如果你觉得写的不错或者帮到你了，记得给我点个赞哟~