【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头

一般的话scroll-view在组件里面使用,而页面里面则使用onReachBottom()这个方法居多

1,onReachBottom 上拉触底后加载更多(未固定表头)

页面结构:

		<view class="box">
			<table border="0">
				<thead>
					<th>名称</th>
					<th style="width: 50px;">状态</th>
					<th>上传时间</th>
					<th style="width: 60px;">重量(kg)</th>
					<th style="width: 50px;">类型</th>
				</thead>
				<tr v-for="(item,index) in utrData" :key="index" class="trs">
					<td>{{item.name}}</td>
					<td>{{item.flag}}</td>
					<td>{{item.createDt}}</td>
					<td>{{item.weight}}</td>
					<td>{{item.typeCode}}</td>
				</tr>
			</table>
			<view class="zwsj">{{ moreContent }}</view>
		</view>
		

注意:
这个box的height要比屏幕的高度高5px或者10px,要不然它不会出现滚动条,没有滚动条就不会触发onReachBottom 这个触底方法了
当然,如果你确保你的数据首次查询的高度比屏幕的高度还高,那它自然就出现滚动条了,这个box就直接等于屏幕的高度就行
如果要考虑数据少于10条,且没有撑满屏幕,那这个box还是设置比屏幕高度高一点比较好.

	export default {
		data() {
			return {
				utrData: [],//列表数组
				pageNum: 1, // 页数
				total: 0,//每页总数
				flag: true, // 上拉加载开关 防止一次触底查询多次问题,防止数据查完后触底还调接口问题
				moreContent: '上拉加载更多数据...',
			}
		},
		methods: {
			//上拉加载更多
			getMoreList(){
				this.flag = true
				uni.request({
					...
					success:res => {
						if(res.data.status == 200){
							this.flag = false
							let result = res.data.data || []
							this.utrData = this.utrData.concat(result)
							if(result.length == 0 && this.pageNum == 1){
								// 一开始就没有数据
								this.moreContent = '暂无数据'
							}else{
								this.total = result ? result.length : 0
								if(this.total < 10){
								// 只有一页数据,不足10条
									this.moreContent = '数据已加载完,共' + this.utrData.length + '条'
									this.flag = true
								}
								// 有很多页
								this.pageNum += 1
							}
						}else{
							this.moreContent = '暂无数据'
							uni.showToast({
								title:res.data.message,
								icon:'none'
							});
						}
					} 
				});
			},
		},
		//监听页面触底函数
		onReachBottom(){
			if(!this.flag){
				this.getMoreList()
			}
		},
	}

如果没效果,先测试onReachBottom有没有触发,一般触发了基本上就没什么问题了

2,scroll-view组件上拉加载更多(固定表头)

ui组件: uview2.0
如果你不想固定表头,就不用 -37 就可以了

wx.getSystemInfoSync().windowHeight 获取当前屏幕的高度

	<view class="box" :style="{height: boxHeight + 48 + 37 + 'px'}">
		<view class="toptitle">
			<u-icon name="list-dot" color="#00c9d5" size="28"></u-icon>
			<text>具体信息</text>
		</view>
		<view class="content">
			<view class="thead">
				<text>code</text>
				<text>时间</text>
				<text>重量(kg)</text>
				<text>类型</text>
				<text>状态</text>
			</view>
			<view class="tbody" :style="{height: boxHeight + 'px'}" id="test">
				<scroll-view
					scroll-y="true"
					lower-threshold="10"
					:style="{height: boxHeight + 'px'}"
					@scrolltolower="scrolltolower">
						<view class="tableData" :style="{height: boxHeight + 10  + 'px'}">
							<view v-for="(item, index) in tableArr" :key="index">
								<text>{{ item.code }}</text>
								<text>{{ item.create_time }}</text>
								<text>{{ item.weight }}</text>
								<text>{{ item.type }}</text>
								<text>{{ item.location}}</text>
							</view>
							<view style="color: #aaa;">
								<text>{{loadingContent}}</text>
							</view>
						</view>
				</scroll-view>
			</view>
		</view>
	</view>

export default {
	data() {
		return {
			tableArr: [],
			boxHeight: wx.getSystemInfoSync().windowHeight - 48 - 37,
			loadingContent: '上拉加载更多数据...',
			total: 0, // 每页总数
			pageNum: 1,// 页数
			flag: true, // 控制上拉翻页
			testHeight: 0
		}
	},
	methods: {
		// 页面滚动触发
		scrolltolower(e) {
			if(!this.flag){
			 	this.getTable()
			 }
		},
		// 查询表格
		getTable(){
			let params = {
				p: this.pageNum
			}
			this.$get('xxx', params).then(res =>{
				this.flag = true
				let result = res.lsit || []
				this.tableArr = this.tableArr.concat(result)
				if(result.length == 0 && this.pageNum == 1){
					// 一开始就没数据
					this.loadingContent = '暂无数据'
				}else{
					this.total = result ? result.length : 0
					if(this.total < 10){
						this.moreContent = '数据已加载完,共' + this.utrData.length + '条'
						this.flag = true
					}
					this.flag = false
					this.pageNum += 1
				}
			})
		},
	},
}

3,scroll-view 部分安卓机型很难触发问题

ios用第二种方法没有问题,部分安卓用的话很难触发上拉加载更多,为什么部分安卓很难触发就不说了,自行百度

解决:
@scrolltolower 方法替换为 @scroll
@scrolltolower 方法是 scroll-view触底了就会触发,是触scroll-view组件的底部,不是触屏幕的底部
@scroll 方法是只要 scroll-view组件滑动了,就会触发这个方法

	methods: {
		// 页面滚动触发
		scrolltolower(e) {
			// 距离底部<100 并且是往上滑的动作
			if(e.detail.scrollHeight - e.detail.scrollTop - this.testHeight <= 100 && this.flag && e.detail.deltaY < 0){
					this.flag = false
					this.getTable()
				}
		},
		// 查询表格
		getTable(){
			let params = {
				p: this.pageNum
			}
			this.$get('xxx', params).then(res =>{
				this.flag = true
				let result = res.lsit || []
				if(result.length == 0 && this.pageNum == 1){
					// 一开始就没数据
					this.loadingContent = '暂无数据'
					this.flag = false
				}else{
					this.pageNum += 1
					this.total = result ? result.length : 0
					if(this.total < 10){
						this.moreContent = '数据已加载完,共' + this.utrData.length + '条'
						this.flag = false
					}
					this.tableArr = this.tableArr.concat(result)
					if(this.testHeight==0){
						let view = uni.createSelectorQuery().in(this).select("#test")
						view.fields({
							size: true,
							scrollOffset: true
						}, data => {
							this.testHeight=data.height
						}).exec();
					}
				}
			})
		},
	},

ok,没了,记录一下,哪里写的不对还请指出,谢谢,下期再见! ! !