【大白话学习】UniApp 微信小程序与APP应用 开发零基础入门教程(四）---文章数据显示

这一节主要是看日记的页面 list.vue 制作，内容比较多，二话不说，我们先上代码，同样把上一节的index.vue 代码拷贝过来,全部替换，再修改成如下，或直接将下面代码拷贝过去

list.vue

看日记 页面的功能，就是把服务上数据库里数据读出来，大白话就是 给服务器发个信息：”请把按我要求订的货发给我“，我们的指令就是 url: _self.apiServer + 'view&page=' + page ，指我要看第几页的数据。

data() {
            return {
                noteList: []    //页面一开始，我们准备一个空 箱子来接收数据
            }
        },

服务器正常营业的情况下，通过 success: res =>   把商品(res.data.datas)发回来，并贴上标签（res.data.result），有货 ok ，或没货 empty。  
有货的情况，我把这些货拆分成一个一个商品（JSON.parse(res.data.datas)），再分别按顺序（index）放到我们事先准备好的箱子noteList里。

接下来我们就在显示区把货品展示出来，来看 显示区，在负责显示的view   上，有这样一行  v-for="(item,index) in noteList"   :key="index" 其中的v-for表示这一个循环读取的过程，这句话翻译过来就是从 noteList 的箱子 中，依次按顺序（index) 取出来，并给货品临时起个小名叫 item。
这样以来，就分别把  第一个item, 第二个item ...  都显示出来了

其它知识点，参考之前两节内容或注释

接下来一节，我们实现 上拉 显示 更多，下拉刷新功能