零基础学小程序008----小程序列表实现+本地json数据解析渲染到小程序列表
来源:互联网 发布:centos忘记密码 编辑:程序博客网 时间:2024/05/29 08:51
基本实现功能
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(备注小程序)
阅读全文
0 0
- 零基础学小程序008----小程序列表实现+本地json数据解析渲染到小程序列表
- 零基础学小程序006(后台数据的获取与解析)----请求服务器json数据展现到小程序上
- 小程序文档整理之 -- 列表渲染
- 小程序自学系列(零基础学小程序)---小程序实现简单的倒计时效果
- 小程序自学系列(零基础学小程序002)---小程序实现电商秒杀倒计时效果
- 小程序 城市切换 列表
- 小程序列表删除功能
- 小程序 条件渲染
- 【微信小程序】小程序读取本地数据
- Python 小程序,实现比较两个列表范围
- 小程序完美实现仿京东商城分类列表
- Windows下一个汇编小程序列表文件
- 小程序填坑:列表滑动操作
- 一个小程序,树状目录列表
- 小程序列表多个批量倒计时
- 小程序实现原理解析
- 小程序自学笔记(零基础学小程序汇总)---史上最全的微信小程序学习笔记,笔记看我你也就学会小程序了
- 零基础学小程序007----小程序轮播图,自动轮播,循环轮播,定时轮播
- JavaSE复习(一)java概述和基本语法上
- Linux下常见的关于目录操作的命令
- 设计模式之外观模式
- 基于MATLAB GUI的串口通信
- camera标定
- 零基础学小程序008----小程序列表实现+本地json数据解析渲染到小程序列表
- android.content.ActivityNotFoundException: No Activity found to handle Intent {
- HDU 5491 The Next(技巧性模拟)
- 在这里写上noip后要填的坑吧
- 光棍节的快乐
- 【2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛】 J Our Journey of Dalian Ends 【拆点费用流】
- 拓展-response响应头设置总结
- python数据分析复盘——数据分析相关库之Pandas
- 2017乌鲁木齐网络赛 skiing(spfa/bellman最长路模板题)