小程序開發（3）-列表頁面開發

選用組件

vant-weapp：https://youzan.github.io/vant-weapp
可以在官網看一下各個樣式的效果，從而判斷我們需要什麼樣的組件。
如果組件無法支持，我們是可以自己寫組件模板的，只不過樣式調整起來稍微麻煩一點
引入定製化樣式組件的好處就在於，我們無需自己寫樣式表，就可以擁有好看的樣式
對於沒有設計能力，或者設計能力較弱的程序員來說，非常的簡單，快捷。

這裏，我需要實現一個列表頁面，樣式我選擇

在index/main.json文件中，寫入下面的代碼：

{
    "usingComponents": {
      "v-button": "../../static/vant-weapp/button/index",
      "van-cell": "../../static/vant-weapp/cell/index",
      "van-cell-group": "../../static/vant-weapp/cell-group/index"
    }
}

在index/index.vue中，按照官方文檔的要求，寫入：

<template>
    <van-cell-group>
      <van-cell title="單元格" value="內容" />
      <van-cell title="單元格" value="內容" label="描述信息" border="{{ false }}" />
    </van-cell-group>
</template>

<script>
</script>

<style scoped>
</style>

發現npm報如下錯誤：

  - border="{{ false }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

這是因爲，在小程序的框架中，有一些vue的特性需要修改後才能使用，將代碼修改如下：

<van-cell title="單元格" value="內容" label="描述信息" border="{{false}}" />

改爲

<van-cell title="單元格" value="內容" label="描述信息" :border="false" />

運行效果如下

加載數據

前面我們表單中，使用的主要是靜態頁面數據，現在我們需要將本地的json文件中的數據，顯示在列表頁面中。

1. 創建一個static/datas文件夾，然後創建一個list_data.js的文件
2. 將你需要的json格式數據寫入到文件中，並在末尾加上export default{list_data};

let list_data=[{
    title:'這裏是標題',
    value:'這裏是內容',
    label:'這裏是描述信息'
},{
   title:'這裏是標題2',
    value:'這裏是內容2',
    label:'這裏是描述信息2'
},
{
    title:'這裏是標題3',
    value:'這裏是內容3',
    label:'這裏是描述信息3'
}]; 
export default{list_data};

然後在pages/index/index.vue文件的script標籤中，引入這個js，並且加載數據

export default {
  data() {
    return {
      listData: []
    };
  },
  beforeMount() {
    this.fun();
  },
  methods: {
    fun() {
      // 更新數據
      this.listData = List.list_data;
      this.ilist();
    },
    ilist() {
      console.log(this.listData);
    }
  }
 
  
};

當你的微信開發者工具後臺，輸入的如下內容時，證明你的數據引入是正確的

數據綁定

當我們完成了數據引入後，需要將數據動態的顯示在之前加載好的cell模板中。

我們使用v-for方法，可以循環將list_data中的數據，加載到cell中

<van-cell v-for="(item, index) in listData" :key="index" :title="item.title" :value="item.value" :label="item.label" :border="false" />

注意：此處的title，value，label等關鍵字前面，一定要加:號。否則的話，還是會報之前的錯誤。