uni-app中不使用scroll-view組件,監聽頁面滑直底部事件

最終達到的目標效果

將要用到

監聽頁面滾動事件:onPageScroll

獲取節點信息uni.createSelectorQuery()

標簽布局

<template>
	<view class="content">
        <!--目標節點-->
		<view class="text-area" id="listArea">
			<view class="square" v-for="(v,i) in info" :key='i'>{{v}}</view>
		</view>
	</view>
</template>

js部分

export default {
		data() {
			return {
				screenHeight: 0, //屏幕高度
				info: [],//展示的列表數據
				isLoading: false, //防止頻繁觸發
				bottomDistinct:200//距離底部多少像素時觸發
			}
		},
		onLoad() {
			//頁面加載時取得屏幕高度
			this.screenHeight = uni.getSystemInfoSync().screenHeight;

			//測試數據(初始化)
			this.info=new Array(5).fill(0).map((v,i)=>i+1);
		},
		methods: {
			/**
			 *  頁面滑動事件
			 */
			onPageScroll: function(e) {
				const {
					scrollTop//滾動條距離頁面頂部的像素
				} = e;
				
				//防止重復觸發
				if(this.isLoading){
					return;
				}
				//獲取SelectorQuery 對象實例
				const query = uni.createSelectorQuery().in(this);

                //為listArea節點綁定查詢請求
				query.select('#listArea').boundingClientRect(data => {
					let {
						height//listArea節點的高度
					} = data; 
					//如果設置的事件觸發距離 大於等於 (節點的高度-屏幕高度-滾動條到頂部的距離)
					if(this.bottomDistinct>=height-this.screenHeight-scrollTop){
						//阻止事件重復觸發
						this.isLoading=true;
						//模擬異步加載數據
						uni.showToast({
							title:"獲取新數據"
						})
						setTimeout(()=>{
							//測試數據
							let arr=new Array(5).fill(0);
							arr=arr.map((v,i)=>this.info.length+i+1);
							
							//數據填充
							this.info=this.info.concat(arr);
							this.isLoading=false;
						}, 1500);
					}
				}).exec();
			}
		}
	}

完整demo代碼

<template>
	<view class="content">
		<view class="text-area" id="listArea">
			<view class="square" v-for="(v,i) in info" :key='i'>{{v}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenHeight: 0, //屏幕高度
				info: [],//展示的列表數據
				isLoading: false, //防止頻繁觸發
				bottomDistinct:200//距離底部多少像素時觸發
			}
		},
		onLoad() {
			//頁面加載時取得屏幕高度
			this.screenHeight = uni.getSystemInfoSync().screenHeight;
			//數據初始化
			this.info=new Array(5).fill(0).map((v,i)=>i+1);
		},
		methods: {
			/**
			 *  頁面滑動事件
			 */
			onPageScroll: function(e) {
				const {
					scrollTop//滾動條距離頁面頂部的像素
				} = e;
				
				//防止重復觸發
				if(this.isLoading){
					return;
				}
				
				const query = uni.createSelectorQuery().in(this);
				query.select('#listArea').boundingClientRect(data => {
					let {
						height//listArea節點的高度
					} = data; 
					//如果設置的事件觸發距離 大於等於 (節點的高度-屏幕高度-滾動條到頂部的距離)
					if(this.bottomDistinct>=height-this.screenHeight-scrollTop){
						//阻止時間重復觸發
						this.isLoading=true;
						//模擬異步加載數據
						uni.showToast({
							title:"獲取新數據"
						})
						setTimeout(()=>{
							//測試數據
							let arr=new Array(5).fill(0);
							arr=arr.map((v,i)=>this.info.length+i+1);
							
							//數據填充
							this.info=this.info.concat(arr);
                                                        //恢復事件觸發
							this.isLoading=false;
						}, 1500);
					}
				}).exec();
			}
		}
	}
</script>

<style>

	.text-area {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background-color: #007AFF;
	}
	.square{
		margin: 1em;
		background-color: #4CD964;
		color: #fff;
		width:8em;
		text-align: center;
		line-height: 5em;
		height: 5em;
	}

</style>