微信小程序入门-实现简单的数据列表

微信小程序目录结构图

这个系列我每篇小程序文章的开头都会放一张小程序的项目目录结构图

要实现的效果图

这是最后完成的效果图，因为刚接触小程序，所以做的比较简单，记录以下实现过程

数据渲染

在微信小程序中，数据来源可以是模拟数据，也可以是从缓存或者网络中获取到的数据。我们可以将获取到的数据关联到js文件的data中，data中的内容一般以key-value的格式存放。针对上面的效果，我们先实现一条数据的渲染，然后再实现列表显示。
先在js中模拟一条数据:
home.js

Page({

  /**
   * 页面的初始数据
   */

  data: {
    //key:content
    //value:content后面的json数组
    content:[{"name":"杨一","phone":"18800000000"}]
  },
  ...
 }
)

然后再wsml中使用{{}}两个大括号来渲染数据,页面加载的时候会从home.js中读取data里边的key值，将key值渲染到界面上。

home.wxml

<view class="content">

    <view class="name">姓名:{{content[0].name}}</view>

    <view class="phone">手机号:{{content[0].phone}}</view>

</view>

为每条数据添加CSS修饰

home.wxss

.content{

  width: 100%;

  padding: 10px 20px;

  border-bottom: 1px solid lightgray;

}

.content .name{

  color: lightskyblue;

  font-size: 14px;

}

.content .phone{

  color: lightgray;

  font-size: 14px;

  margin-top: 8px;

}

列表操作

稍微修改以下wxml和js文件的内容便可将单挑数据变为列表形式。
首先将home.js中data的内容修改为多条数据:

data: {
     content:[{"name":"杨一","phone":"18800000000"},{"name":"钱二","phone":"18800000000"},{"name":"张三","phone":"18800000000"},{"name":"李四","phone":"18800000000"},{"name":"王五","phone":"18800000000"},{"name":"赵六","phone":"18800000000"},{"name":"李七","phone":"18800000000"},{"name":"宋八","phone":"18800000000"}]
  },

然后使用view结合wx-for来循环渲染列表中的数据:

循环渲染可以传递一个数组，一次渲染出多个同类型的组件。数组当前每一项的变量名默认为item，可以通过item获取当前项的内容

<view class="content" wx:for="{{content}}" wx:key="key" wx:for-item="item">

    <view class="name">姓名:{{item.name}}</view>

    <view class="phone">手机号:{{item.phone}}</view>

  </view>

也可也使用block结合wx-for达到同样的效果,block并不是一个组件，而是一个包装元素、组件的标签

<block  wx:for="{{content}}" wx:key="key" wx:for-item="item">

<view class="content">

    <view class="name">姓名:{{item.name}}</view>

    <view class="phone">手机号:{{item.phone}}</view>

  </view>

</block>

需要注意的是，使用wx:for时列表的位置会动态改变，所以为了保存组件的特征和状态，需要使用wx:key来指定列表中项目的唯一标识符，如果不提供wx:key会提出一个警告。