點選下面網址進入系列教程

上一節帶領大家實現領簡單的計算器，這節來帶領大家學習小程式列表功能。

本節知識點

• 1，定義本地json檔案
• 2，本地檔案引入
• 3，小程式列表渲染實現
• 4，解析本地json（為解析網路json做準備）

學習之前先來帶大家看下官方文件（官方文件永遠是最好的老師)

官方列表渲染實現

我們先把之前計算器專案裡的home.wxml和home.js內容替換為上面的官方案例

home.js實現

home.wxml實現

替換完檔案後，點選下編譯，就能看到列表效果了

下面來講本節知識點

一，定義本地的json資料來源（當然正常情況下json資料是請求伺服器返回的。作為初學者我們這裡用本地json資料）

// 本地模擬json資料
var json = [{
  "id": 1,
  "title": "日本文學",
  "time": "9月8日"
 },
 {
  "id": 2,
  "title": "滿月之夜白鯨現",
  "time": "9月8日"
 },
 {
  "id": 3,
  "title": "愛情",
  "time": "9月8日"
 },
 {
  "id": 4,
  "title": "外國文學",
  "time": "9月8日"
 }
]

// 定義資料出口
module.exports = {
 dataList: json
}

上面的程式碼在data資料夾下的json.js裡定義

json.js的位置

二，列表的控制元件的定義（home.wxml）

<!-- home.wxml -->
<!--列表渲染  -->
<block wx:for="{{dataList}}" wx:key="item">
 <view class='item-container'>
  <!--這裡只是為了展示序列號  -->
  <text>{{item.id}}</text>
  <!--這裡展示標題 -->
  <text class='item-title'> {{item.title}} </text>
  <!--這裡展示時間 -->
  <text class='item-time'> {{item.time}} </text>
 </view>
</block>
 

三，把本地json資料解析到列表中

// home.js
//引入本地json資料，這裡引入的就是第一步定義的json資料
var jsonData = require('../../data/json.js');
Page({
 data: {
 },
 //我們在這裡載入本地json資料
 onLoad: function () {
  this.setData({
   //jsonData.dataList獲取json.js裡定義的json資料，並賦值給dataList
   dataList: jsonData.dataList
  });  
 },
})

var jsonData = require('../../data/json.js');
就是用來引入本地檔案的。

到此我們就實現了小程式的列表展示

解析本地json到列表

頁面有點醜，我們簡單美化下.

在home.wxss定義樣式

原始碼和視訊講解請加我微信，有問題也可以加我微信：2501902696（備註小程式）