vue+vant上拉加载

一，今天分享一个vue+vant的上拉加载其中用到了Tab 标签页和List 列表，详细组件信息请看组件库，我这里就不做描述了，附上文档地址：https://vant-contrib.gitee.io/vant/#/zh-CN/list

二、HTML

<div class="flower-tab">
	<van-tabs v-model="active1" @click="onTabs" :sticky="true" offset-top="5rem">
		<van-tab v-for="(tab,index) in tabList" :key="index">
			<template #title>
				<div><span>{{tab.T_Name}}</span></div>
				<div class="Subtitle"><span>{{tab.T_EName}}</span></div>
			</template>
	<van-list v-model="loading" :finished="finished" :immediate-check="false"
							:finished-text="finishedText" @load="onLoad(page,tid)">
			<div class="flower-content">
				<div class="flower-item" v-for="(item,i) in flower_list" :key="i">
					<div class="flower-item-img">
						<van-image :src="url+item.P_PreviewPic" />
					</div>
			<div class="flower-item-info">
			<div class="flower-item-info-title"><span>{{item.P_Name}}</span></div>
				<div class="infos">
					<div class="price">￥{{item.P_Price}}</div>
				</div>
			<div class="amount">
				<div class="reach">{{item.browseNum}}人到过</div>
					<div class="reach">{{item.sales_num}}人付款</div>
				</div>
			</div>
			</div>
			</div>
	</van-list>
		</van-tab>
	</van-tabs>
</div>

三、js

data() {
	return {
		flower_list: [],
		tabList: [],
		loading: false,
		finished: false,
		page: 1,
		pagesize: 5,
		finishedText: '---我也是有底线的---',
		tid: ''
			}
		},
mounted() {},
created() {
	this.onLoad(this.page, this.tid)//加载第一页数据
	},
methods: {
    onTabs(i) {
		let that = this,
			tid = that.tabList[i].T_ID;
			that.page = 1;
			that.flower_list = [];
			that.loading = true;
			hat.finished = false;
		    if (that.loading) {
				that.onLoad(that.page, tid, )
				}
			},
    onl oad(page, tid) {
		this.page++;
		let that = this;
		let params = {
			page: page,
			pagesize: that.pagesize,
			tid: tid
			}
		that.$toast.loading({
			duration: 0, // 持续展示 toast
			forbidClick: true,
			message: "加载中..."
				});
			axios.get('接口地址', {
				params: params
				}).then((res) => {
			let data = res.data
			if (data.success == true) {
				that.$toast.clear();
				that.loading = false;
			if (data.data == null || data.data.length == 0) {
				  that.finished = true
				  return
				}
			if (data.data.length > 0) {
				that.flower_list = that.flower_list.concat(data.data)
				}
				    }
				}).catch(() => {})
			},
}

四、css

.flower-tab {
	width: 100%;
}

.flower-tab .van-tabs--line .van-tabs__wrap {
	height: 1.8rem;
}

.flower-tab .van-tab__text--ellipsis {
	display: inline-block;
	text-align: center;
}

.flower-tab .Subtitle {
	font-size: 0.3125rem;
	color: #999;
}

.flower-tab .van-tabs__nav {
	background-color: #F2F2F2;
}

.flower-tab .van-tab {
	font-size: 0.40625rem;
	line-height: 0.625rem;
	padding: 0 0.125rem;
}

.flower-tab .van-tab--active {
	font-size: 0.46875rem;
}

.flower-tab .van-tabs__content {
	padding-bottom: 1.5625rem;
}

.flower-content {
	width: 94%;
	height: auto;
	margin: 0.3125rem auto;
	-moz-column-count: 2;
	/* Firefox */
	-webkit-column-count: 2;
	/* Safari 和 Chrome */
	column-count: 2;
	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;
	column-gap: 1em;
}

.flower-item {
	height: auto;
	padding-bottom: 0.3125rem;
	background-color: #fff;
	margin-top: 0.375rem;
	border-radius: 0.15625rem;
	break-inside: avoid;
	overflow: hidden;
}

.flower-item:nth-child(1) {
	margin-top: 0;
}

.flower-item-info {
	width: 94%;
	margin: auto;
	font-size: 0.375rem;
	color: #666;
}

.flower-item-info-title {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.flower-item-info-name {
	display: flex;
	margin-top: 0.15625rem;
	align-items: center;
}

.flower-item-info-name .img {
	display: flex;
	align-items: center;
}

.flower-item-info-name .name {
	margin-left: 0.1875rem;
	font-size: 0.34375rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.infos {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.1875rem;
}

.infos .price {
	color: red;
	font-size: 0.46875rem;
}

.amount {
	display: flex;
	justify-content: space-between;
	color: #999;
	font-size: 0.3125rem;
	margin-top: 0.1875rem;
}

.flower-activity {
	width: 94%;
	height: auto;
	margin: 0.3125rem auto 0;
}

.activity {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.activity-item {
	width: 20%;
	padding: 0.15625rem;
	background-color: #fff;
	border-radius: 0.25rem;
	overflow: hidden;
	margin-bottom: 0.25rem;
}


.activity-img {
	border-radius: 0.125rem;
}

.activity-title {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.3125rem;
	color: #666;
}

五、效果图

标签：vue,vant,margin,item,flower,上拉,tab,rem,data
来源： https://blog.csdn.net/weixin_49296016/article/details/118081164