uni-app开发(2)---上拉加载组件封装

心已赠人 2021-08-03 02:34 354阅读 0赞

PC对数据处理可以使用分页，移动端通常是使用上拉加载处理。但是这个上拉加载在很多地方都是会使用的，所以需要我们抽里程组件。

**应用场景：**

在列表部分，使用上拉加载，这个时候需要使用scrolltolower上拉触底事件，具体的代码如下：

<scroll-view scroll-y class="list" @scrolltolower="loadMore(index)">
    	
    	<block v-for="(item, index1) in items.list" :key="index1">
    		<index-list :item="item" :index="index1"></index-list>
    	</block>
    	
    	<load-more :loadtext="items.loadtext"></load-more>
    </scroll-view>

在上拉触底方法中，我们需要加载更多数据，伪代码如下：

loadMore(index) {
    	if (this.newsList[index].loadtext != '上拉加载更多') {
    		return
    	}
    	// 修改状态
    	this.newsList[index].loadtext = '加载中...';
    	// 获取数据
    	setTimeout(()=> {
    		let obj = {
    			userpic: '../../static/demo/userpic/12.jpg',
    			username: '风向',
    			isguanzhu: false,
    			title: '标题',
    			type: 'img',
    			titlepic: '../../static/demo/datapic/11.jpg',
    			infonum: {
    				index: 0, //0未操作1顶2踩
    				dingnum: 11,
    				cainum: 11,
    			},
    			commentnum: 10,
    			sharenum: 10,
    			palynum: 200,
    			long: "2:35"
    		};
    		this.newsList[index].list.push(obj)
    		// 获取完成
    		// this.newsList[index].loadtext = '没有更多数据';
    	}, 100)
    
    
    },

load-more.vue

<template>
    	<view class="load-more">{
       {loadtext}}</view>
    </template>
    
    <script>
    	export default {
    		props: {
    			loadtext: String
    		}
    	}
    </script>
    
    <style scoped>
    	.load-more {
    		color: #AAAAAA;
    		padding: 15upx;
    		text-align: center;
    	}
    </style>

**注意事项**：在上拉触底事件中，往往会又回弹的问题，可以使用在page.json中配置app-plus中设置"bounce":"none"解决。