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

<div>
    <van-nav-bar title="商城" left-text="返回" @click="back" left-arrow>
      <template #right>
        <van-icon name="search" size="18" @click="search" />
      </template>
    </van-nav-bar>
    <!-- 标题 -->

    <van-tabs v-model:active="active">
      <van-tab title="综合">
        <van-row>
          <van-col span="12" v-for="item in records.slice(0, length)" :key="item.index">
            <van-col span="24">
              <van-image :src="item.image" />
            </van-col>
            <van-row>
              <van-col span="17" class="name">《{{ item.bookname }}》</van-col>
              <van-col span="7" class="price">￥{{ item.price }}</van-col>
            </van-row>
          </van-col>
        </van-row>
  </van-tab>
      <van-tab title="价格">内容 2</van-tab>
      <van-tab title="新品">内容 3</van-tab>
    </van-tabs>
    <!-- 标签页 -->
    <p v-if="loading" @click="more()" class="more">点击加载更多</p>
    <p v-if="finished" @click="more()" class="more">没有更多了</p>
    <!-- 底部 -->
  </div>

（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.控制台