uniapp 上拉加载更多完整实现源码

直接上代码

<template>
	<view class="searchList">
		<!-- 搜索框 -->
		<Search></Search>
		<img class="top_img" src="@/static/image/dataDelivery.png" />

		<view class="menus p_r">
			<view class="" v-for="(item,idx) in title_list">
				<view class="menuItem p_r" @click="tabChange(idx)" :class="menuIdx==idx?'on':''">
					<img class="menuIcon" :src="menuIdx==idx?item.select_graph:item.unselected_graph" mode="" />
					<view class="menuIdx==idx?'on':''">{{item.title}} </view>
				</view>
				<image v-if="menuIdx==idx" class="sanjiao" src="../../static/image/sanjiao.png" mode=""></image>
			</view>
		</view>

		<view class="list">
			<DataDelivery :type="type" :forumList="forumList" :showNum="2000"></DataDelivery>
		</view>
	</view>
</template>

<script>
	import DataDelivery from '@/components/dataDelivery.vue';
	import Search from '@/components/search.vue';
	export default {
		components: {
			DataDelivery,
			Search
		},
		data() {
			return {
				title_list: [],
				forumList: [],
				id: '',
				type: getApp().globalData.TheToolkit,
				menuIdx: 0,
				dataDelivery_icon1: this.$config.dadaImagesUrl + 'dataDelivery_icon1.png',
				dataDelivery_icon11: this.$config.dadaImagesUrl + 'dataDelivery_icon1-1.png',
				dataDelivery_icon2: this.$config.dadaImagesUrl + 'dataDelivery2.png',
				dataDelivery_icon22: this.$config.dadaImagesUrl + 'dataDelivery2-2.png',
				banners: [this.$config.dadaImagesUrl + 'home_menu1.png'],
				forumLists_pageSize:8,
				forumLists_page:1,
			};
		},
		onLoad(option) {
			this.$common.Init.call(this);
			this.getData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新')
			setTimeout(() => {
				console.log('下拉刷新停止')
				uni.stopPullDownRefresh()
			}, 5500)
		},
		// 上拉加载
		onReachBottom() {
			console.log('上拉加载')
			if(this.forumList.length==0)return
			this.forumLists_page=this.forumLists_page+1
			this.getForumLists();
			setTimeout(() => {
				console.log('上拉加载停止')
				uni.stopPullDownRefresh()
			}, 5500)
		},
		methods: {
			tabChange(idx) {
				this.menuIdx = idx
				this.forumLists_page=1
				this.forumList=[]
				this.id = this.title_list[idx].id
				this.getForumLists()
			},
			getData() {
				let data = {
					type: this.type
				}
				this.$request(this.$api.community.topicLists, data).then((res) => {
					this.title_list = res.data.lists || [];
					this.id = res.data.lists[0].id
					this.getForumLists()
				});
			},
			// 获取帖子列表
			getForumLists() {
				let data = {
					forum_tags_id: this.id,
					type: this.type,
					pageSize:this.forumLists_pageSize,
					page:this.forumLists_page,
				}
				this.$request(this.$api.community.forumLists, data).then((res) => {
					var list = (res.data && res.data.lists) || []
					list.forEach(item => {
						item.create_time = this.$util.toDateDetail(item.create_time)
					})
					this.forumList = this.forumList.concat(list)
					
					console.log('forumList',this.forumList)
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.list {
		border: 2rpx solid #f3f3f3;
		border-radius: 20rpx;
		width: 90%;
		margin-left: 3%;
		min-height: 300rpx;
		position: relative;
		top: -8rpx;
		padding-top: 40rpx;

	}

	.searchList {
		height: 100vh;
	}

	.sanjiao {
		width: 40rpx;
		height: 20rpx;
		margin-left: 56rpx;
		margin-top: 0rpx;
	}

	.menus {
		justify-content: space-around;
		margin-top: 20rpx;
		width: 90%;
		margin-left: 5%;

		.menuItem {
			text-align: center;
			line-height: 70rpx;
			border-radius: 14rpx;
			font-size: 30rpx;
			color: #d0d0d0;
			// text{
			// 	position: relative;
			// 	top: -4rpx;
			// }
		}

		.menuIcon {
			height: 70rpx;
			position: relative;
			top: 2rpx;
			margin-right: 6rpx;
		}

		.on {
			color: #000;
		}

	}

	// background-color: red;

	.title {
		position: relative;
		left: 36rpx;
		top: 60rpx;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #102841;
	}
</style>

 

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值