vantにおけるvan-listの使い方説明
van-listの中の元素はfloat様式があることができなくて、さもなくば連続してload事件を触発することができます。
元のコード
ヒント
Listコンポーネントは、PulRefreshコンポーネントと組み合わせて使用でき、リストのドロップダウンリフレッシュの効果が得られますが、更新されたデータは、ページ上でListリストの内容を満たすことができない場合、自動的にリストの更新をトリガしません。リストを満たすために。
リストにref属性を追加して、ドロップダウンリフレッシュ後、ドロップダウンリフレッシュイベントで手動でthisを呼び出します。
ListコンポーネントをPullRefreshコンポーネントと組み合わせて一つのコンポーネントにパッケージ化して、そして父のコンポーネントで使用する場合、このパッケージにlistコンポーネントのv-modelの値を送る必要があります。listがローディング状態にあるかどうかを制御します。
そして親コンポーネントでv-moel=「loading」またはis-loading.sync=「loading」をサブアセンブリに伝えて彼にサブアセンブリのlistを制御させるv-modelの制御loadロード状態は、本来はvalue属性とinputイベントの組み合わせですが、listコンポーネントのファイルは修正されました。だから、私たちはサブアセンブリを受け取る時にvalueを使ってはいけません。loadingを使います。
この図はvantのソースコードです。
元のコード
<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コンポーネントはPulRefreshコンポーネントと組み合わせて使うことができます。小さなヒントと小さなピットです。ヒント
Listコンポーネントは、PulRefreshコンポーネントと組み合わせて使用でき、リストのドロップダウンリフレッシュの効果が得られますが、更新されたデータは、ページ上でListリストの内容を満たすことができない場合、自動的にリストの更新をトリガしません。リストを満たすために。
リストにref属性を追加して、ドロップダウンリフレッシュ後、ドロップダウンリフレッシュイベントで手動でthisを呼び出します。
// list
<van-list
v-model="loading"
ref="listRef" // 1. ref
:finished="finished"
finished-text=" "
:error.sync="error"
error-text=" , "
@load="onLoad"
>
//
onRefresh() {
...
// 2. , list load
this.$refs.listRef.check()
}
小さな穴ListコンポーネントをPullRefreshコンポーネントと組み合わせて一つのコンポーネントにパッケージ化して、そして父のコンポーネントで使用する場合、このパッケージにlistコンポーネントのv-modelの値を送る必要があります。listがローディング状態にあるかどうかを制御します。
そして親コンポーネントでv-moel=「loading」またはis-loading.sync=「loading」をサブアセンブリに伝えて彼にサブアセンブリのlistを制御させるv-modelの制御loadロード状態は、本来はvalue属性とinputイベントの組み合わせですが、listコンポーネントのファイルは修正されました。だから、私たちはサブアセンブリを受け取る時にvalueを使ってはいけません。loadingを使います。
この図はvantのソースコードです。
// list v-model
:is-loading.sync="loading"
//
v-model="loading"
// list
// value
// :value="isLoading"
// loading
:loading="isLoading"
以上のvantのvan-listの使い方の説明は小編が皆さんに提供した内容の全部です。参考にしていただければと思います。よろしくお願いします。