零基础学小程序008----小程序列表实现+本地json数据解析渲染到小程序列表
2017-09-12 21:50
447 查看
基本实现功能
1,本地json数据
2,小程序列表渲染
3,本地文件引入
老规矩先看效果图
这里列表比较简单,就4列数据。下面来看下实现步骤
一,定义本地的json数据源(当然正常情况下json数据是请求服务器返回的。作为初学者我们这里用本地json数据)
二,列表的控件的定义
三,把本地json数据解析到列表中
到此我们就实现了小程序列表的简单实现
源码:https://github.com/qiushi123/xiaochengxu_demos
你也可以关注我的个人微信号,每天定期推送小程序最新开发技术,优秀源码,各种干货
关注上面微号回复1可以加小程序学习微信群,群里和大家交流学习,一起进步
有问题加我微信:2501902696(备注小程序)
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, }); }, })
到此我们就实现了小程序列表的简单实现
源码:https://github.com/qiushi123/xiaochengxu_demos
你也可以关注我的个人微信号,每天定期推送小程序最新开发技术,优秀源码,各种干货
关注上面微号回复1可以加小程序学习微信群,群里和大家交流学习,一起进步
有问题加我微信:2501902696(备注小程序)
相关文章推荐
- 购物车二级列表的实现,在一级列表基础上,bean类里再添加两个字段(请求本地json数据)
- 购物车二级列表的实现,在一级列表基础上,bean类里再添加两个字段(请求本地json数据)
- 微信小程序实现快递查询功能(界面传值、JSON数据请求和解析、radio-group的使用...)
- 微信小程序-解析JSON,实现列表无限加载
- 使用Ext.Extend:使用Ext的JsonReader读取本地数据实现grid分页
- 关于jquery解析json数据时动态追加tr 指定条数换行问题 实现list的 并列显示效果
- 《项目经验》--通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
- <WP7>(三)手把手教你写天气预报程序:运用WebClient获取天气和json数据解析
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- android客户端从服务器端获取json数据并解析的实现代码
- jquery+json实现数据列表分页
- 遍历表格中的input转化为json数据传到后台解析实现一些操作
- android实现json数据的解析和把数据转换成json格式的字符串
- jquery+json实现数据列表分页示例代码
- 《项目经验》--后台一般处理程序向前台JS文件传递JSON,JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中
- android实现json数据的解析和把数据转换成json格式的字符串
- <WP7>(四)手把手教你写天气预报程序:本地数据库SQL CE,XML数据解析
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- <WP7>(三)手把手教你写天气预报程序:运用WebClient获取天气和json数据解析
- Android通过类对象的方式实现JSON数据的解析