手记

零基础学小程序008----小程序列表实现+本地json数据解析渲染到小程序列表


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

本节知识点

  • 1,定义本地json文件

  • 2,本地文件引入

  • 3,小程序列表渲染实现

  • 4,解析本地json(为解析网络json做准备)

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

官方列表渲染实现


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

home.js实现


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里定义


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');
就是用来引入本地文件的。

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


解析本地json到列表

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


在home.wxss定义样式



1人推荐
随时随地看视频
慕课网APP