微信小程序入門-實現簡單的數據列表

微信小程序目錄結構圖

這個系列我每篇小程序文章的開頭都會放一張小程序的項目目錄結構圖

要實現的效果圖

這是最後完成的效果圖，由於剛接觸小程序，因此作的比較簡單，記錄如下實現過程

數據渲染

在微信小程序中，數據來源能夠是模擬數據，也能夠是從緩存或者網絡中獲取到的數據。咱們能夠將獲取到的數據關聯到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會提出一個警告。