ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue+vant上拉加载

2021-06-21 10:58:23  阅读:274  来源: 互联网

标签:vue vant margin item flower 上拉 tab rem data


一,今天分享一个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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有