Vant2+Vue2实现点击加载更多数据~_vue2 查看更多文档实现

在做题目的时候遇到这么一个问题

但是发现这个要求的时候已经把数组都渲染好了

    <div class="main">
      <van-tabs v-model="active">
        <van-tab>
          <template #title>
            <a href="javascript:void(0)" @click="getAll">默认</a> </template>
          <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="item in allList" :key="item.id">
              <van-image :src="item.url" />
              <p>{{item.name}}</p>
              <h3>￥{{item.price}}</h3>
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab>
          <template #title>
            <van-icon name="sort" />
            <a href="javascript:void(0)" @click="orderSort">默认</a>
          </template>
          <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="item in allList" :key="item.id">
              <van-image :src="item.url" />
              <p>{{item.name}}</p>
              <h3>￥{{item.price}}</h3>
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab>
          <template #title>
            <a href="javascript:void(0)" @click="timeSort">新品</a> </template>
          <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="item in allList" :key="item.id">
              <van-image :src="item.url" />
              <p>{{item.name}}</p>
              <h3>￥{{item.price}}</h3>
            </van-grid-item>
          </van-grid>
        </van-tab>
      </van-tabs>

然后要根据需求去实现对应的：当数组的长度>10个的时候，就先展示十个，然后点击下面的加载更多就可以把后面的渲染出来，而且是指定的个数

那么就可以用到slice

1、声明一个长度变量，配合slice方法

在data上声明一个变量：length，值指定，我这里给10，这里我默认展示0-10条数据

我这里的HTML结构是用了vant2的自定义宫格，然后对宫格做循环才渲染的列表

 要改的话对循环动刀就可以了

思路：把数组进行分隔渲染

给循环的数组添加分隔函数

分隔从0开始，不包含10嘛，就一共是10条，这个length是前面定义的变量

但是这个时候报错了

 但是删掉splice()函数后数组又正常渲染，那么就是函数的问题了

去看了一下

 splice会把分隔结果返回给原数组（覆盖掉）

这个时候发现了另外一个方法：slice()

 

 那这个时候试着去对循环的数组用上 slice()方法

 这里为了方便看就先把length改为2了

        

打开页面一看，欸，没有保存，还成功了

然后接下来就要求实现【点击加载更多】这个效果了 

2、实现点击加载更多

前提：这个时候已经做了一个分隔，length的值我这里改为2，方便观察

在底部去声明一个P标签

 然后在下面声明一个P标签，给P标签加一个v-if和点击事件

点击事件里面对length变量进行一个 length+=要额外添加的个数

v-if去对p做一个判断，如果length的长度小于原数组长度就让length++

            <p v-if="length < allList.length" @click="length += 2" class="footer">———— 点击加载更多 ————</p>
            <p v-else class="footer">———— 没有更多了 ————</p>

 这里没有隐藏掉，是改了文字

 点击加载

 完成了思密达！