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

青旅半醒 2022-11-18 10:56 180阅读 0赞

直接上代码

<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>