上一节带领大家实现领简单的计算器,这节来带领大家学习小程序列表功能。
本节知识点
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定义样式