vue实现点击加载更多

1.定义两个布尔型的变量，一个是默认显示的数，一个是默认加载的数loading和finished

2.v-if条件渲染，如果值为true，就会编译，如果为false,那么页面将不会生成html元素/标签

<template>
  <!-- 展示商品页面 -->
  <div class="name">
    <van-grid :column-num="2">
      <div v-for="item in records.slice(0, length)" :key="records.index"> <van-col class="name"><van-image width="10rem"
            height="10rem" fit="contain" :key="item.index" :src="item.image" /><br>名称:{{ item.bookname }}<br>价格：{{
              item.price
            }}</van-col></div>

    </van-grid>
   
    <p v-if="loading" @click="more()" class="btn">
      点击加载更多
      <!-- <van-icon name="arrow-down" /> -->
    </p>
    <p v-if="finished" @click="more()" class="btn">没有更多了</p>
  </div>
</template>
<script>
import { fetchList } from '@/api/book'
export default {
  data() {
    return {
      num: 6, //默认加载数
      length: 8,  //数组显示的元素个数
      // isFlag: true,
      listQuery: {
        page: 1,
        limit: 40,
        bookname: ""
      },
      // error:false,
      loading: true,
      finished: false,
      records: [
        {
          id: 0,
          bookname: '',
          price: 0.0,
          image: ''
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      fetchList(this.listQuery).then(response => {
        console.log(response.data)
        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
        }
        if (this.length >= this.records.length) {
          this.loading = false
          this.finished = true
        }
        break
      }
    },
  }
}
</script>
<style>
.btn {
  text-align: center;

}
</style>

点击加载更多，新显示6个图

数据库的数据全都加载完后，在底部显示没有更多了