点击下面网址进入系列教程
零基础入门小程序系列教程
基本实现功能
- 1,本地json数据
- 2,小程序列表渲染
- 3,本地文件引入
老规矩先看效果图
image这里列表比较简单,就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里定义
image二,列表的控件的定义
<!--列表渲染 -->
<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
你也可以关注我的个人微信号,每天定期推送小程序最新开发技术,优秀源码,各种干货
image关注上面微号回复1可以加小程序学习微信群,群里和大家交流学习,一起进步
有问题加我微信:2501902696(备注小程序)
网友评论
建议传到GitHub上源码