小程序开发（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等关键字前面，一定要加:号。否则的话，还是会报之前的错误。