小程序实战入门--列表和轮播图的实现，小程序解析json数据

小程序列表渲染实践

最新推荐文章于 2024-04-29 23:16:51 发布

weixin_33724570

最新推荐文章于 2024-04-29 23:16:51 发布

阅读量182

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a7984466fb9a063417b10da

基本实现功能

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（备注小程序）

转载于:https://juejin.im/post/5a7984466fb9a063417b10da