点击下面网址进入系列教程

上一节带领大家实现领简单的计算器，这节来带领大家学习小程序列表功能。

本节知识点

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(备注小程序)