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

微信小程序目录结构图

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

要实现的效果图

这是最后完成的效果图，由于刚接触小程序，因此作的比较简单，记录如下实现过程

数据渲染

在微信小程序中，数据来源能够是模拟数据，也能够是从缓存或者网络中获取到的数据。咱们能够将获取到的数据关联到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会提出一个警告。