vant 中van-list的用法说明
程序员文章站
2024-01-06 17:40:22
van-list里面的元素不能有float样式，否则会连续触发 load 事件原代码
van-list里面的元素不能有float样式，否则会连续触发 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 列表中的内容的时候，他并不会主动触发列表刷新，以至于来填满列表。
可以给list组件添加ref属性，然后在下拉刷新后，在下拉刷新的事件里手动调用this.$refs.listref(你的list的ref名称).check()来触发列表加载后续的数据
// 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加载状态，按理说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的用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。