vant 中van-list的用法說明
更新時間：2020年11月11日 15:45:51 作者：柚子Christy
這篇文章主要介紹了vant 中van-list的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
van-list里面的元素不能有float樣式，否則會連續(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;
}
// 如果當前頁數 = 總頁數，則已經沒有數據
if (res.data.data.pageNum === res.data.data.pages) {
this.finished = true;
this.finishedText = "- 沒有更多了-";
}
// 如果總頁數大于當前頁碼，頁碼+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;
}
// 如果當前頁數 = 總頁數，則已經沒有數據
if (res.data.data.pageNum === res.data.data.pages) {
this.finished = true;
this.finishedText = "- 沒有更多了-";
}
// 如果總頁數大于當前頁碼，頁碼+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>
補充知識：vant里 List 組件可以與 PullRefresh 組件結合使用的一個小提示與小坑坑
小提示
List 組件可以與 PullRefresh 組件結合使用，可以實現列表下拉刷新的效果，但是當下拉刷新后更新的數據展示在頁面上不能撐滿 List 列表中的內容的時候，他并不會主動觸發(fā)列表刷新，以至于來填滿列表。
可以給list組件添加ref屬性，然后在下拉刷新后，在下拉刷新的事件里手動調用this.$refs.listRef(你的list的ref名稱).check()來觸發(fā)列表加載后續(xù)的數據
// list組件
<van-list
v-model="loading"
ref="listRef" // 1. 綁定ref
:finished="finished"
finished-text="沒有更多了"
:error.sync="error"
error-text="請求失敗，點擊重新加載"
@load="onLoad"
>
// 下拉刷新的事件
onRefresh() {
...刷新成功后
// 2.手動去讓下拉刷新后，去執(zhí)行l(wèi)ist列表的load事件
this.$refs.listRef.check()
}
小坑坑
如果你把List 組件可以與 PullRefresh 組件結合使用封裝成一個組件，然后在父組件中使用的時候，需要給封裝的這個組件傳list組件的v-model的值來控制list是否處于加載狀態(tài)。
然后在父組件傳 v-moel=“l(fā)oading” 或者 :is-loading.sync=“l(fā)oading” 傳給子組件讓他來控制子組件的list的v-model的控制load加載狀態(tài)，按理說v-model 默認是 value 屬性和 input 事件的組合，但是list組件的文件默認修改了，把傳過去的value用 model: { prop: ‘loading' }修改了，所以我們在子組件接收的時候不能用value 要用loading
此圖為vant的源碼
// 父組件 給子組件傳list的v-model的值 :is-loading.sync="loading" // 或寫成 v-model="loading" // 子組件 list組件 // 子組件不能用value接收 // :value="isLoading" // 應該寫成loading :loading="isLoading"
以上這篇vant 中van-list的用法說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了vue component 組件使用 ，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要給大家介紹了關于vue操作dom元素的3種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
Vue.js框架是什么，為什么要選擇它？這篇文章為大家介紹目前前端技術使用的趨勢，以及Vue.js的優(yōu)點和適用場景等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了深入淺出vue圖片路徑的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
詳解vue-cli4 配置不同開發(fā)環(huán)境打包命令
這篇文章主要介紹了vue-cli4 配置不同開發(fā)環(huán)境打包命令,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue中結合clipboard實現復制功能 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細介紹了vue實現原生下拉刷新，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue3中的reactive、readonly和shallowReactive使用詳解
在 Vue3 中,可以使用 shallowReactive 函數創(chuàng)建一個淺層響應式對象,它接收一個普通對象作為參數,返回一個淺層響應式代理對象,本文給大家介紹vue3中的reactive、readonly和shallowReactive使用,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了Vue 中如何正確引入第三方模塊的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
vue?this.$router和this.$route區(qū)別解析及路由傳參的2種方式?&&?this.$route
this.$router?相當于一個全局的路由器對象,包含了很多屬性和對象（比如?history?對象）,任何頁面都可以調用其?push(),?replace(),?go()?等方法,本文給大家介紹Vue中this.$router與this.$route的區(qū)別?及push()方法,感興趣的朋友跟隨小編一起看看吧2023-10-10