vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問(wèn)題

更新時(shí)間：2022年10月18日 09:25:53 作者：山竹回家了

這篇文章主要介紹了vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vant中l(wèi)ist使用及首次加載觸發(fā)兩次

以下是list的基本使用方法，主要原理就是當(dāng)頁(yè)面數(shù)據(jù)小于offset這個(gè)高度的時(shí)候，就會(huì)觸發(fā)load，在load里面需要調(diào)用接口發(fā)送下一頁(yè)的數(shù)據(jù).所以發(fā)送完畢后需要將設(shè)置分頁(yè)的屬性加一，并將獲取到的新值push進(jìn)接收數(shù)據(jù)的數(shù)組里，而不是直接賦值，如果直接賦值那么數(shù)組里就只有新值，之前的值就被覆蓋.

調(diào)用完以后將loading的樣式關(guān)閉，并且判斷數(shù)據(jù)庫(kù)中還有沒有數(shù)據(jù)，如果沒有，就將finished為true，表示已經(jīng)加載完畢了.

首次加載觸發(fā)兩次解決問(wèn)題

1.在mounted或者create調(diào)用，原因是有可能在數(shù)據(jù)沒回來(lái)的時(shí)候load就監(jiān)測(cè)到數(shù)據(jù)低于高度，也發(fā)送了一次，等到數(shù)據(jù)回來(lái)時(shí)已經(jīng)請(qǐng)求兩次了.所以干脆不需要調(diào)用，交給load檢測(cè)即可.

2.offset過(guò)于高，默認(rèn)的高度是300，有一次獲取數(shù)據(jù)一次只獲取5條，雖然覆蓋了頁(yè)面高度，但稍作觸碰就會(huì)二次發(fā)送.

3.請(qǐng)求的數(shù)據(jù)過(guò)少，請(qǐng)求的數(shù)據(jù)不足以覆蓋頁(yè)面就會(huì)二次加載，可以看文檔list第一條示例便是.

<template>
  <div>
    <div class="groupBuyingList">
      <!-- 加入加載 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="沒有更多了"
        @load="onLoad"
        :offset='50'
      >
        <!-- 每個(gè)模塊 -->
        <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">
              <!-- 拼團(tuán)價(jià) -->
              <div class="groupMoney">
                <span>￥</span>{{ item.groupPrice }} <span>起</span>
              </div>
              <!-- 原價(jià) -->
              <div class="originalCost">￥{{ item.underlinedPrice }}</div>
            </div>
            <div class="share" @click="handleGo(item)">
              <span> 去開團(tuán) </span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { activityList } from "../../../api/appletGroupBuying/groupBuyingActivity";
export default {
  data() {
    return {
      userInfo: {
        // 條數(shù)
        pageNum: 1,
      },
      loading: false, //加載中狀態(tài)
      finished: false, //是否加載
      // 接收列表數(shù)據(jù)
      results: [],
      // 總條數(shù)
      rowCount: "",
    };
  },
  mounted() {
  },
  methods: {
    async activityList() {
      let res = await activityList(this.userInfo);//發(fā)送請(qǐng)求
      // console.log(this.results);
      // 如果沒有數(shù)據(jù)
      if (res.data.ret.results === null) {
        this.results = [];
        this.finished = true; // 停止加載
      } else {
        // 總條數(shù)
        this.rowCount = res.data.ret.rowCount;
        //  將數(shù)據(jù)放入數(shù)組
        this.results.push(...res.data.ret.results);
        this.loading = false; // 加載狀態(tài)結(jié)束
        // 如果list長(zhǎng)度大于等于總數(shù)據(jù)條數(shù),數(shù)據(jù)全部加載完成
        //this.finished = true 結(jié)束加載狀態(tài)
        this.results.length >= this.rowCount ? (this.finished = true) : "";
      }
    },
    onLoad() {
      this.activityList(this.userInfo); // 調(diào)用上面方法,請(qǐng)求數(shù)據(jù)
      this.userInfo.pageNum++; // 分頁(yè)數(shù)加一
    },
  },
};
</script>

<style lang="less" scoped>
.groupBuyingList {
  padding: 20px;
  background: #f4f4f4;
  //每個(gè)活動(dòng)
  .activity {
    padding: 30px 35px;
    margin-bottom: 32px;
    width: 710px;
    background: #ffffff;
    border-radius: 20px;
    box-sizing: border-box;
    > img {
      width: 100%;
    }
    // 標(biāo)題
    .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;
    }
    // 拼團(tuán)人數(shù)
    .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;
        // 拼團(tuán)價(jià)
        .groupMoney {
          display: flex;
          margin-right: 13px;
          height: 62px;
          font-size: 44px;
          font-weight: bold;
          line-height: 62px;
          color: #ff8105;
          span {
            font-size: 30px;
          }
        }
        // 原價(jià)
        .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>

vant中l(wèi)ist列表組件使用

List 的運(yùn)行機(jī)制：

List 會(huì)監(jiān)聽瀏覽器的滾動(dòng)事件并計(jì)算列表的位置，當(dāng)列表底部與可視區(qū)域的距離小于offset時(shí)，List 會(huì)觸發(fā)一次 load 事件。

1. 基礎(chǔ)結(jié)構(gòu)

<van-list?
?? ?v-model="loading" ?? ? ? ? ? ? ? ? ? ?// 是否顯示正在加載狀態(tài)
?? ?:finished="finished" ?? ??? ??? ??? ?// 是否已經(jīng)加載完成
?? ?finished-text="沒有更多了"?? ??? ??? ?// 加載完成提示文案
?? ?@load="onLoad" ?? ??? ??? ??? ??? ??? ?// 滾動(dòng)條與底部距離offset時(shí)觸發(fā)事件
?? ?offset="300"?? ??? ??? ??? ??? ??? ?// 滾動(dòng)條與底部距離offset時(shí)觸發(fā)@load(默認(rèn)300)
?? ?:error.sync="error" ?? ??? ??? ??? ?// 是否顯示加載失敗狀態(tài)
?? ?error-text="請(qǐng)求失敗，點(diǎn)擊重新加載"?? ?// 加載失敗提示文案
?? ?>
?? ?
? ?<van-cell v-for='(item, index) in list' :key="index"> ?// 循環(huán)列表數(shù)據(jù)
? ??? ??? ?<div>{{item}}循環(huán)出來(lái)的數(shù)據(jù)<div>
? ?</van-cell>
?</van-list> ?
2.data聲明:
data() {
? ? return {
? ? ? loading: false, ? ? ? ? // 是否處在加載狀態(tài)
? ? ? finished: false, ? ? ? ?// 是否已加載完成
? ? ? error: false, ? ? ? ? ? // 是否加載失敗
? ? ? list: [], ? ? ? ? ? ? ? // 數(shù)據(jù)項(xiàng)
? ? ? page: 1, ? ? ? ? ? ? ? ?// 分頁(yè)
? ? ? page_size: 10 ? ? ? ? ? // 每頁(yè)條數(shù)
? ? ? total: 0 ? ? ? ? ? ? ? ?// 數(shù)據(jù)總條數(shù)
? ? }
}

3.methods定義方法

methods: {
? ? onLoad() {
? ? ? // 異步更新數(shù)據(jù)
? ? ? // setTimeout 僅做示例，真實(shí)場(chǎng)景中一般為 ajax 請(qǐng)求
? ? ? setTimeout(() => {
? ? ? ? for (let i = 0; i < 10; i++) {
? ? ? ? ? this.list.push(this.list.length + 1);
? ? ? ? }
?
? ? ? ? // 加載狀態(tài)結(jié)束
? ? ? ? this.loading = false;
?
? ? ? ? // 數(shù)據(jù)全部加載完成
? ? ? ? if (this.list.length >= 40) {
? ? ? ? ? this.finished = true;
? ? ? ? }
? ? ? }, 1000);
? ? },
? },
};

4.調(diào)用api渲染頁(yè)面

導(dǎo)入這個(gè)接口 import { } from '@/api/xxx.js'

async onLoad () {
? const res = await 接口方法名(this.channel.id, Date.now())
? // 獲取的數(shù)據(jù)
? const arr = res.data.data.results // 它是一個(gè)數(shù)組
? // 1. 追加數(shù)據(jù)到list
? // ? ?對(duì)數(shù)組進(jìn)行展開
? this.list.push(...arr)
? // 2. 把loading設(shè)置為false
? this.loading = false
? // 3. 判斷是否所有的數(shù)據(jù)全部加載完成，如果是：finished設(shè)為true
? if (arr.length === 0) {
? ? // 說(shuō)明取不到數(shù)據(jù)了
? ? this.finished = true
? }
? // 4. 頁(yè)面上提示一下用戶
? this.$toast.success('成功加載數(shù)據(jù)')
}

loading 和 finished 分別是什么含義？

List有以下三種狀態(tài)，理解這些狀態(tài)有助于你正確地使用List組件：

非加載中，loading為false，此時(shí)會(huì)根據(jù)列表滾動(dòng)位置判斷是否觸發(fā)load事件（列表內(nèi)容不足一屏幕時(shí)，會(huì)直接觸發(fā)）
加載中，loading為true，表示正在發(fā)送異步請(qǐng)求，此時(shí)不會(huì)觸發(fā)load事件
加載完成，finished為true，此時(shí)不會(huì)觸發(fā)load事件

在每次請(qǐng)求完畢后，需要手動(dòng)將loading設(shè)置為false，表示加載結(jié)束

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: