vant 中van-list的用法說(shuō)明

更新時(shí)間：2020年11月11日 15:45:51 作者：柚子Christy

這篇文章主要介紹了vant 中van-list的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

van-list里面的元素不能有float樣式，否則會(huì)連續(xù)觸發(fā) load 事件

原代碼

<template>
 <div class="about">
  <van-tabs v-model="active" sticky @change="getTypeDate">
   <van-tab v-for="(tab) in typeList" :title="tab.name" :key="tab.id">
    <div :style="{height: contentHeight}" class="pic-content">
     <van-list
      :finished="finished"
      :finished-text="finishedText"
      v-model="loading"
      :offset="10"
      :immediate-check="false"
      @load="getserviceList"
     >
     <!------------------------------------------------- 修改前代碼 --------------------------------------------->
       /*<div
        class="pic-box"
        v-for="(serve) in serviceList"
        :key="serve.id"
        @click="router(serve)"
       >
        <div class="pic-item">
         <img
          v-if="serve.picturePath"
          :src="$BASE_PICTUREPATH_URL + serve.picturePath.split(',')[0]"
         >
        </div>
        <p>{{serve.name}}</p>
        <p class="price-red">¥{{serve.price}}</p>
       </div>*/
       <!------------------------------------------------- 修改前代碼 --------------------------------------------->
     </van-list>
    </div>
   </van-tab>
  </van-tabs>
 </div>
</template>

<script>
import { Tab, Tabs, List, Cell, Row, Col } from "vant";
import { FetchServeType, FetchServeList } from "../apis/serve.js";

export default {
 data() {
  return {
   active: 0,
   typeList: [],
   serviceList: [],
   type: "",
   finishedText: "",
   finished: false,
   pageNum: 1,
   pageSize: 10,
   contentHeight: 0,
   loading: false
  };
 },
 mounted() {
  this.getOrderStyle();
  this.contentHeight = document.documentElement.clientHeight - 66 - 40 + "px";
 },
 methods: {
  async getOrderStyle() {
   let res = await FetchServeType();
   if (res.data && res.data.success) {
    this.typeList = res.data.data;
    this.type = res.data.data[0].name;
    this.getTypeDate();
   }
  },
  getTypeDate() {
   this.pageNum = 1;
   this.type = this.typeList[this.active].name;
   this.serviceList = [];
   this.finishedText = "";
   this.finished = false;
   this.getserviceList();
  },
  async getserviceList() {
   let toast = this.$toast.loading({
    mask: true,
    message: "加載中..."
   });
   const { type, pageNum, pageSize } = this;
   let params = {
    type,
    pageNum,
    pageSize
   };
   let res = await FetchServeList(params);
   this.loading = false;
   toast.close();
   if (res.data && res.data.success) {
    let list = (res.data.data && res.data.data.list) || [];
    if (pageNum > 1) {
     this.serviceList = [...this.serviceList, ...list];
    } else {
     this.serviceList = list;
    }
    // 如果當(dāng)前頁(yè)數(shù) = 總頁(yè)數(shù)，則已經(jīng)沒(méi)有數(shù)據(jù)
    if (res.data.data.pageNum === res.data.data.pages) {
     this.finished = true;
     this.finishedText = "- 沒(méi)有更多了-";
    }
    // 如果總頁(yè)數(shù)大于當(dāng)前頁(yè)碼，頁(yè)碼+1
    if (res.data.data.pages > pageNum) {
     this.pageNum++;
    }
   }
   console.log("FetchServeList: ", this.serviceList);
  }
 }
};
</script>

<style lang="scss" scoped>
.pic-content {
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 .pic-box {
 /****************************修改前代碼***************************/
  background-color: #fff;
  overflow: hidden;
  break-inside: avoid;
  box-sizing: border-box;
  margin-bottom: 0.7rem;
  padding: 0.8rem;
  width: 48%;
  height: 16rem;
  ~~float: left;~~ /**************不能有float樣式*************/
  margin: 1%;
  border-radius: 4px;
   /****************************修改前代碼***************************/
  p:nth-of-type(1) {
   padding: 0.8rem 0;
  }
  p:nth-of-type(2) {
   color: red;
  }
  .pic-item {
   height: 11rem;

   flex-direction: column;
   justify-content: center;
   overflow: hidden;
   img {
    width: 100%;
    height: auto;
    border-radius: 4px;
   }
  }
 }
}
</style>

// 修改后代碼(注釋部分為修改后代碼)

<template>
 <div class="about">
  <van-tabs v-model="active" sticky @change="getTypeDate">
   <van-tab v-for="(tab) in typeList" :title="tab.name" :key="tab.id">
    <div :style="{height: contentHeight}" class="pic-content">
     <van-list
      :finished="finished"
      :finished-text="finishedText"
      v-model="loading"
      :offset="10"
      :immediate-check="false"
      @load="getserviceList"
     >
     <!------------------- 修改后代碼 -------------------->
      /*<van-row>
       <van-col
        span="12"
        class="pic-box"
        v-for="(serve) in serviceList"
        :key="serve.id"
        @click="router(serve)"
       >
        <div class="pic-item">
         <img
          v-if="serve.picturePath"
          :src="$BASE_PICTUREPATH_URL + serve.picturePath.split(',')[0]"
         >
        </div>
        <p>{{serve.name}}</p>
        <p class="price-red">¥{{serve.price}}</p>
       </van-col>
      </van-row>*/
      <!------------------- 修改后代碼 -------------------->
     </van-list>
    </div>
   </van-tab>
  </van-tabs>
 </div>
</template>

<script>
import { Tab, Tabs, List, Cell, Row, Col } from "vant";
import { FetchServeType, FetchServeList } from "../apis/serve.js";

export default {
 data() {
  return {
   active: 0,
   typeList: [],
   serviceList: [],
   type: "",
   finishedText: "",
   finished: false,
   pageNum: 1,
   pageSize: 10,
   contentHeight: 0,
   loading: false
  };
 },
 mounted() {
  this.getOrderStyle();
  this.contentHeight = document.documentElement.clientHeight - 66 - 40 + "px";
 },
 methods: {
  async getOrderStyle() {
   let res = await FetchServeType();
   if (res.data && res.data.success) {
    this.typeList = res.data.data;
    this.type = res.data.data[0].name;
    this.getTypeDate();
   }
  },
  getTypeDate() {
   this.pageNum = 1;
   this.type = this.typeList[this.active].name;
   this.serviceList = [];
   this.finishedText = "";
   this.finished = false;
   this.getserviceList();
  },
  async getserviceList() {
   let toast = this.$toast.loading({
    mask: true,
    message: "加載中..."
   });
   const { type, pageNum, pageSize } = this;
   let params = {
    type,
    pageNum,
    pageSize
   };
   let res = await FetchServeList(params);
   this.loading = false;
   toast.close();
   if (res.data && res.data.success) {
    let list = (res.data.data && res.data.data.list) || [];
    if (pageNum > 1) {
     this.serviceList = [...this.serviceList, ...list];
    } else {
     this.serviceList = list;
    }
    // 如果當(dāng)前頁(yè)數(shù) = 總頁(yè)數(shù)，則已經(jīng)沒(méi)有數(shù)據(jù)
    if (res.data.data.pageNum === res.data.data.pages) {
     this.finished = true;
     this.finishedText = "- 沒(méi)有更多了-";
    }
    // 如果總頁(yè)數(shù)大于當(dāng)前頁(yè)碼，頁(yè)碼+1
    if (res.data.data.pages > pageNum) {
     this.pageNum++;
    }
   }
   console.log("FetchServeList: ", this.serviceList);
  }
 }
};
</script>

<style lang="scss" scoped>
.pic-content {
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 .pic-box {
 /************************ 修改后代碼**************************/
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 0.7rem;
  padding: 0.8rem;
  height: 16rem;
  border-radius: 4px;
  /************************ 修改后代碼************************ **/
  p:nth-of-type(1) {
   padding: 0.8rem 0;
  }
  p:nth-of-type(2) {
   color: red;
  }
  .pic-item {
   height: 11rem;

   flex-direction: column;
   justify-content: center;
   overflow: hidden;
   img {
    width: 100%;
    height: auto;
    border-radius: 4px;
   }
  }
 }
}
</style>

補(bǔ)充知識(shí)：vant里 List 組件可以與 PullRefresh 組件結(jié)合使用的一個(gè)小提示與小坑坑

小提示

List 組件可以與 PullRefresh 組件結(jié)合使用，可以實(shí)現(xiàn)列表下拉刷新的效果，但是當(dāng)下拉刷新后更新的數(shù)據(jù)展示在頁(yè)面上不能撐滿(mǎn) List 列表中的內(nèi)容的時(shí)候，他并不會(huì)主動(dòng)觸發(fā)列表刷新，以至于來(lái)填滿(mǎn)列表。

可以給list組件添加ref屬性，然后在下拉刷新后，在下拉刷新的事件里手動(dòng)調(diào)用this.$refs.listRef(你的list的ref名稱(chēng)).check()來(lái)觸發(fā)列表加載后續(xù)的數(shù)據(jù)

// list組件
<van-list
  v-model="loading"
  ref="listRef" // 1. 綁定ref
  :finished="finished"
  finished-text="沒(méi)有更多了"
  :error.sync="error"
  error-text="請(qǐng)求失敗，點(diǎn)擊重新加載"
  @load="onLoad"
>
// 下拉刷新的事件
onRefresh() {
 ...刷新成功后
 // 2.手動(dòng)去讓下拉刷新后，去執(zhí)行l(wèi)ist列表的load事件
 this.$refs.listRef.check()
}

小坑坑

如果你把List 組件可以與 PullRefresh 組件結(jié)合使用封裝成一個(gè)組件，然后在父組件中使用的時(shí)候，需要給封裝的這個(gè)組件傳list組件的v-model的值來(lái)控制list是否處于加載狀態(tài)。

然后在父組件傳 v-moel=“l(fā)oading” 或者 :is-loading.sync=“l(fā)oading” 傳給子組件讓他來(lái)控制子組件的list的v-model的控制load加載狀態(tài)，按理說(shuō)v-model 默認(rèn)是 value 屬性和 input 事件的組合，但是list組件的文件默認(rèn)修改了，把傳過(guò)去的value用 model: { prop: ‘loading' }修改了，所以我們?cè)谧咏M件接收的時(shí)候不能用value 要用loading

此圖為vant的源碼

// 父組件 給子組件傳list的v-model的值
:is-loading.sync="loading"
// 或?qū)懗?
v-model="loading"

// 子組件 list組件
// 子組件不能用value接收 
// :value="isLoading"
// 應(yīng)該寫(xiě)成loading
:loading="isLoading"

以上這篇vant 中van-list的用法說(shuō)明就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: