vant中list用法与首次加载触发两次解决问题

以下是list的基本使用方法,主要原理就是当页面数据小于offset这个高度的时候,就会触发load,在load里面需要调用接口发送下一页的数据.所以发送完毕后需要将设置分页的属性加一,并将获取到的新值push进接收数据的数组里,而不是直接赋值,如果直接赋值那么数组里就只有新值,之前的值就被覆盖.
调用完以后将loading的样式关闭,并且判断数据库中还有没有数据,如果没有,就将finished为true,表示已经加载完毕了.

首次加载触发两次解决问题

• 1.在mounted或者create调用,原因是有可能在数据没回来的时候load就监测到数据低于高度,也发送了一次,等到数据回来时已经请求两次了.所以干脆不需要调用,交给load检测即可.
• 2.offset过于高,默认的高度是300,有一次获取数据一次只获取5条,虽然覆盖了页面高度,但稍作触碰就会二次发送.
• 3.请求的数据过少,请求的数据不足以覆盖页面就会二次加载,可以看文档list第一条示例便是.

<template>
  <div>
    <div class="groupBuyingList">
      <!-- 加入加载 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :offset='50'
      >
        <!-- 每个模块 -->
        <div class="activity" v-for="(item, index) in results" :key="index">
          <img :src="item.photo" alt="" />
          <div class="title">{{ item.cname }}</div>
          <div class="groupPeople">
            <span>{{ item.groupLabel }}</span>
          </div>
          <div class="operation">
            <div class="money">
              <!-- 拼团价 -->
              <div class="groupMoney">
                <span>￥</span>{{ item.groupPrice }} <span>起</span>
              </div>
              <!-- 原价 -->
              <div class="originalCost">￥{{ item.underlinedPrice }}</div>
            </div>
            <div class="share" @click="handleGo(item)">
              <span> 去开团 </span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
import { activityList } from "../../../api/appletGroupBuying/groupBuyingActivity";
export default {
  data() {
    return {
      userInfo: {
        // 条数
        pageNum: 1,
      },
      loading: false, //加载中状态
      finished: false, //是否加载
      // 接收列表数据
      results: [],
      // 总条数
      rowCount: "",
    };
  },
  mounted() {
  },
  methods: {
    async activityList() {
      let res = await activityList(this.userInfo);//发送请求
      // console.log(this.results);
      // 如果没有数据
      if (res.data.ret.results === null) {
        this.results = [];
        this.finished = true; // 停止加载
      } else {
        // 总条数
        this.rowCount = res.data.ret.rowCount;
        //  将数据放入数组
        this.results.push(...res.data.ret.results);
        this.loading = false; // 加载状态结束
        // 如果list长度大于等于总数据条数,数据全部加载完成
        //this.finished = true 结束加载状态
        this.results.length >= this.rowCount ? (this.finished = true) : "";
      }
    },
    onLoad() {
      this.activityList(this.userInfo); // 调用上面方法,请求数据
      this.userInfo.pageNum++; // 分页数加一
    },
  },
};
</script>

<style lang="less" scoped>
.groupBuyingList {
  padding: 20px;
  background: #f4f4f4;
  //每个活动
  .activity {
    padding: 30px 35px;
    margin-bottom: 32px;
    width: 710px;
    background: #ffffff;
    border-radius: 20px;
    box-sizing: border-box;
    > img {
      width: 100%;
    }
    // 标题
    .title {
      margin-top: 30px;
      width: 100%;
      height: 40px;
      font-size: 28px;
      font-weight: bold;
      line-height: 40px;
      color: #545353;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    // 拼团人数
    .groupPeople {
      margin-top: 26px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      span {
        padding: 0 3px 0 3px;
        border: 2px solid #ff7f00;
        border-radius: 10px;
        font-size: 24px;
        font-weight: 400;
        line-height: 33px;
        color: #ff7f00;
      }
    }
    .operation {
      display: flex;
      justify-content: space-between;
      .money {
        display: flex;
        // 拼团价
        .groupMoney {
          display: flex;
          margin-right: 13px;
          height: 62px;
          font-size: 44px;
          font-weight: bold;
          line-height: 62px;
          color: #ff8105;
          span {
            font-size: 30px;
          }
        }
        // 原价
        .originalCost {
          text-decoration: line-through;
          width: 119px;
          height: 40px;
          font-size: 28px;
          line-height: 60px;
          color: #b5b4b1;
        }
      } //分享获客
      .share {
        width: 180px;
        height: 60px;
        background: #ff8105;
        display: flex;
        align-items: center;
        border-radius: 20px;
        span {
          width: 100%;
          line-height: 60px;
          text-align: center;
          font-size: 29px;
          font-weight: bold;
          line-height: 37px;
          color: #ffffff;
        }
      }
    }
  }
}
</style>