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

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

本節知識點

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)

{{item.id}}

{{item.title}}

{{item.time}}

三，把本地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(備注小程序)

總結

以上是生活随笔為你收集整理的wx轮播图接口学习用json格式_零基础学小程序008----列表和轮播图的实现，小程序解析json数据...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。