vant中list组件的使用/点击加载更多数据 |
您所在的位置：网站首页 › vant滚动加载更多 › vant中list组件的使用/点击加载更多数据 |
vant中list组件的使用/点击加载更多数据
|
1.在api/book.js中写向后端发送请求的接口 import request from "../utils/request"; export function fetchList(query){ return request({ method:"get", url:"book/lists", params:query, }) }2.商城页面详写 （1）templat v-for用法（转载） 访问数组用法：使用v-for="item in list"的写法，依次取出list中的所有item，或者使用v-for="(item,i) in list"，依次取出list中的所有item和它们对应的索引i 访问对象数组用法：使用v-for="user in list "，依次取出list中的每个对象user，或者使用v-for="(user,i) in list"，依次取出list中的每个对象和它们对应的索引 访问对象用法：使用v-for="(val,key) in list"，依次取出list中的每个对象的键和值，或者使用v-for="(val,key,i) in list",依次取出list中的每个对象的键，值和索引 迭代数字用法：使用v-for="count in 10"，迭代次数将从1开始，一直迭代至10 《{{ item.bookname }}》 ￥{{ item.price }} 内容 2 内容 3点击加载更多 没有更多了 （2）css部分 .header { text-align: center; font-size: 18px; font-weight: 600; } .name { color: black; text-align: left; } .price { color: red; } .footer { text-align: center; } .more { text-align: center; }（3）script部分data声明 created生命周期:在组件实例处理完所有与状态相关的选项后调用。当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。 import { fetchList } from '@/api/book' export default { data() { return { listQuery: { page: 1, limit: 40 }, loading: true, finished: false, num: 6, //默认加载数 length: 6, //数组显示的元素个数 records: [ { id: 0, bookname: '', price: 0, image: '' } ] } }, created() { this.getList() }, methods: { getList() { fetchList(this.listQuery).then((response) => { this.records = response.data.data.records }) }, more() { for (let i = 1; i < 4; i++) { if (this.length < this.records.length) { this.length += this.num this.loading = true // console.log(this.length) // console.log(this.records.length) } else { this.loading = false this.finished = true } // console.log(this.loading, this.finished, this.length >= this.records.length) break } }, search() { this.$router.push('/') }, back() { this.$router.push('/') } } }2.后端
3.控制台
|
【本文地址】
今日新闻 |
推荐新闻 |