vant中list的使用以及首次加载触发两次解决问题_vue.js_

           // 循环列表数据            
{{item}}循环出来的数据
         2.data声明: data() {     return {       loading: false,         // 是否处在加载状态       finished: false,        // 是否已加载完成       error: false,           // 是否加载失败       list: [],               // 数据项       page: 1,                // 分页       page_size: 10           // 每页条数       total: 0                // 数据总条数     } }

methods: {     onLoad() {       // 异步更新数据       // setTimeout 仅做示例，真实场景中一般为 ajax 请求       setTimeout(() => {         for (let i = 0; i < 10; i++) {           this.list.push(this.list.length + 1);         }           // 加载状态结束         this.loading = false;           // 数据全部加载完成         if (this.list.length >= 40) {           this.finished = true;         }       }, 1000);     },   }, };

async onLoad () {   const res = await 接口方法名(this.channel.id, Date.now())   // 获取的数据   const arr = res.data.data.results // 它是一个数组   // 1. 追加数据到list   //    对数组进行展开   this.list.push(...arr)   // 2. 把loading设置为false   this.loading = false   // 3. 判断是否所有的数据全部加载完成，如果是：finished设为true   if (arr.length === 0) {     // 说明取不到数据了     this.finished = true   }   // 4. 页面上提示一下用户   this.$toast.success('成功加载数据') }