纵有疾风起
人生不言弃

零基础学小程序008—-列表和轮播图的实现,小程序解析json数据

点击下面网址进入系列教程

10天零基础入门小程序系列教程

上一节带领大家实现领简单的计算器,这节来带领大家学习小程序列表功能。

本节知识点

  • 1,定义本地json文件
  • 2,本地文件引入
  • 3,小程序列表渲染实现
  • 4,解析本地json(为解析网络json做准备)

学习之前先来带大家看下官方文档(官方文档永远是最好的老师)

零基础学小程序008—-列表和轮播图的实现,小程序解析json数据插图
官方列表渲染实现

我们先把之前计算器项目里的home.wxml和home.js内容替换为上面的官方案例

零基础学小程序008—-列表和轮播图的实现,小程序解析json数据插图(1)
home.js实现

零基础学小程序008—-列表和轮播图的实现,小程序解析json数据插图(2)
home.wxml实现

替换完文件后,点击下编译,就能看到列表效果了

下面来讲本节知识点

一,定义本地的json数据源(当然正常情况下json数据是请求服务器返回的。作为初学者我们这里用本地json数据)

// 本地模拟json数据var json = [{  "id": 1,  "title": "日本文学",  "time": "9月8日" }, {  "id": 2,  "title": "满月之夜白鲸现",  "time": "9月8日" }, {  "id": 3,  "title": "爱情",  "time": "9月8日" }, {  "id": 4,  "title": "外国文学",  "time": "9月8日" }]// 定义数据出口module.exports = { dataList: json}

上面的代码在data文件夹下的json.js里定义

零基础学小程序008—-列表和轮播图的实现,小程序解析json数据插图(3)
json.js的位置

二,列表的控件的定义(home.wxml)

<!-- home.wxml --><!--列表渲染  --><block wx:for="{{dataList}}" wx:key="item"> <view class='item-container'>  <!--这里只是为了展示序列号  -->  <text>{{item.id}}</text>  <!--这里展示标题 -->  <text class='item-title'> {{item.title}} </text>  <!--这里展示时间 -->  <text class='item-time'> {{item.time}} </text> </view></block>

三,把本地json数据解析到列表中

// home.js//引入本地json数据,这里引入的就是第一步定义的json数据var jsonData = require('../../data/json.js');Page({ data: { }, //我们在这里加载本地json数据 onLoad: function () {  this.setData({   //jsonData.dataList获取json.js里定义的json数据,并赋值给dataList   dataList: jsonData.dataList  });   },})

var jsonData = require(‘../../data/json.js’);
就是用来引入本地文件的。

到此我们就实现了小程序的列表展示

零基础学小程序008—-列表和轮播图的实现,小程序解析json数据插图(4)
解析本地json到列表

页面有点丑,我们简单美化下.

零基础学小程序008—-列表和轮播图的实现,小程序解析json数据插图(5)
在home.wxss定义样式

源码和视频讲解请加我微信,有问题也可以加我微信:2501902696(备注小程序)

文章转载于:https://www.jianshu.com/p/722dbc9402ec

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 零基础学小程序008—-列表和轮播图的实现,小程序解析json数据

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活