零基础学小程序008----小程序列表实现+本地json数据解析渲染到小程序列表
Posted 小程叙开发
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零基础学小程序008----小程序列表实现+本地json数据解析渲染到小程序列表相关的知识,希望对你有一定的参考价值。
基本实现功能
1,本地json数据
2,小程序列表渲染
3,本地文件引入
老规矩先看效果图
这里列表比较简单,就4列数据。下面来看下实现步骤
一,定义本地的json数据源(当然正常情况下json数据是请求服务器返回的。作为初学者我们这里用本地json数据)
// 本地模拟数据 var localData = [ { "count": 1, "title": "日本文学", "time": "9月8日" }, { "count": 2, "title": "满月之夜白鲸现", "time": "9月8日" }, { "count": 3, "title": "爱情", "time": "9月8日" }, { "count": 4, "title": "外国文学", "time": "9月8日" } ] // 定义数据出口 module.exports = { postList: localData }
上面的代码在posts-data.js里定义
二,列表的控件的定义
<!--列表渲染 --> <block wx:for="{{dataList}}" wx:for-item="item" wx:for-index="idx"> <view class='item-container'> <!--这里只是为了展示序列号 --> <text>{{idx}}</text> <text class='item-title'> {{item.title}} </text> <text class='item-time'> {{item.time}} </text> </view> </block>
三,把本地json数据解析到列表中
// index.js //引入本地json数据,这里引入的就是第一步定义的json数据 var postData = require('../../data/posts-data.js'); Page({ data: {//data在onload执行之后执行 }, onLoad: function () { this.setData({//获取数据成功后的数据绑定 dataList: postData.postList, }); }, })
到此我们就实现了小程序列表的简单实现
源码:http://pan.baidu.com/s/1hssy768 如果连接失效加我微信
关注上面微号回复1可以加小程序学习微信群,群里和大家交流学习,一起进步
有问题加我微信:2501902696(备注小程序)
以上是关于零基础学小程序008----小程序列表实现+本地json数据解析渲染到小程序列表的主要内容,如果未能解决你的问题,请参考以下文章