小程序列表讲解。

wxml:

<view class="list">
  <view class="item" wx:for="{{list}}" wx:key="id">
    <image src="{{item.pic}}" mode="aspectFill"></image>
    <view class="title">{{item.title}}</view>
  </view>
</view>

类比 HTML： view ≈ div ， image ≈ img

## 关键语法详解

### 1. wx:for="{{list}}" —— 列表循环

<view class="item" wx:for="{{list}}" wx:key="id">

- wx:for 是小程序的循环指令

- {{list}} 绑定 js 里 data.list 这个数组

- 数组有几个元素，就循环生成几个 .item

对应 offer.js 的数据 ：

that.setData({ list: res.data.data });
// list = [
//   { id: 1, title: "文章1", pic: "https://..." },
//   { id: 2, title: "文章2", pic: "https://..." },
//   { id: 3, title: "文章3", pic: "https://..." }
// ]

数组有3个元素 → 渲染3个 .item 卡片

### 2. wx:key="id" —— 列表唯一标识

wx:key="id"

- 每个循环项的唯一标识，用数据里的 id 字段

- 作用：列表更新时，小程序能精准识别哪一项变了，提高渲染性能

- 类似 Vue 的 :key 或 React 的 key

### 3. item —— 默认循环变量

<image src="{{item.pic}}"/>
<view class="title">{{item.title}}</view>

- wx:for 默认用 item 代表当前循环到的元素

- item.pic = 当前元素的 pic 字段

- item.title = 当前元素的 title 字段

展开后的效果 （假设 list 有3条数据）：

<view class="list">
  <!-- 第1次循环，item = {id:1, title:"文章1", pic:"..."} -->
  <view class="item">
    <image src="https://...文章1的图.jpg"/>
    <view class="title">文章1</view>
  </view>

  <!-- 第2次循环，item = {id:2, title:"文章2", pic:"..."} -->
  <view class="item">
    <image src="https://...文章2的图.jpg"/>
    <view class="title">文章2</view>
  </view>

  <!-- 第3次循环，item = {id:3, title:"文章3", pic:"..."} -->
  <view class="item">
    <image src="https://...文章3的图.jpg"/>
    <view class="title">文章3</view>
  </view>
</view>

### 4. {{ }} —— 数据绑定（Mustache 语法）

src="{{item.pic}}"

- 双花括号里写变量名或表达式

- 小程序会自动把变量的值填进去

- 例如 {{item.pic}} 会被替换成 "https://diguo.teke.vip/d/file/xxx.jpg"

### 5. mode="aspectFill" —— 图片裁剪模式

<image src="{{item.pic}}" mode="aspectFill"></image>

mode 控制图片如何适应容器：

这里用 aspectFill + offer.wxss 里固定的 width:100%; height:300rpx ，保证所有卡片图大小一致、不变形。

## 完整数据流

帝国CMS数据库
    ↓ (api/list.php 查询)
接口返回 JSON
    ↓ { code:0, data:[{id,title,pic}, ...] }
wx.request success 回调
    ↓ res.data.data
that.setData({ list: res.data.data })
    ↓ 存到页面 data.list
wxml 的 wx:for="{{list}}"
    ↓ 循环渲染
页面上显示N个 .item 卡片

## 对应关系

## 总结一句话

wx:for 把 list 数组循环成多个 .item 卡片，每个卡片用 {{item.xxx}} 显示对应字段的数据。 这是小程序列表渲染的标准写法，掌握这一个就能做任何列表页。