小程序开发（3）-列表页面开发

矫情吗；* 2023-07-18 02:33 23阅读 0赞

## 选用组件 ##

vant-weapp：https://youzan.github.io/vant-weapp  
可以在官网看一下各个样式的效果，从而判断我们需要什么样的组件。  
如果组件无法支持，我们是可以自己写组件模板的，只不过样式调整起来稍微麻烦一点  
引入定制化样式组件的好处就在于，我们无需自己写样式表，就可以拥有好看的样式  
对于没有设计能力，或者设计能力较弱的程序员来说，非常的简单，快捷。

这里，我需要实现一个列表页面，样式我选择  
![在这里插入图片描述][20200323151317842.png]

在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中，按照官方文档的要求，写入：

发现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" />

运行效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70]

## 加载数据 ##

前面我们表单中，使用的主要是静态页面数据，现在我们需要将本地的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);
        }
      }
     
      
    };

当你的微信开发者工具后台，输入的如下内容时，证明你的数据引入是正确的  
![在这里插入图片描述][20200323153013655.png]

## 数据绑定 ##

当我们完成了数据引入后，需要将数据动态的显示在之前加载好的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" />

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70 1]

注意：此处的title，value，label等关键字前面，一定要加:号。否则的话，还是会报之前的错误。

[20200323151317842.png]: /images/20230528/3d3eb3b2b03242acba6e0184d90817cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70]: /images/20230528/e2244608e0e945d58df564562a8f8a76.png
[20200323153013655.png]: /images/20230528/13648f29440943b780667f1e5b1e68ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70 1]: /images/20230528/a0723574573e467e9753355e6bbd23d7.png