3

微信小程序获取页面滚动到底部代码

 1 year ago
source link: https://www.iplayio.cn/post/1303725
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

微信小程序获取页面滚动到底部代码

发布：3小时前 更新：3小时前 folder_open 第三方平台对接 微信 comment

原文地址：微信小程序获取页面滚动到底部代码

微信小程序获取页面滚动到底部代码

onPageScroll(e) {
			// 监听页面的滚动事件
			const page = this.selectComponent('page')
			const scrollTop = e.scrollTop // 获取页面滚动距离顶部的距离
			const systemInfoSync = wx.getSystemInfoSync()
			console.log(systemInfoSync)
			const windowHeight = systemInfoSync.windowHeight // 获取窗口的高度
			const statusBarHeight = systemInfoSync.statusBarHeight //顶部状态栏的高度	
			const query = wx.createSelectorQuery().in(this)
			query.select('.container').boundingClientRect()
			let _this = this;
			query.exec(res => {
				const pageHeight = res[0].height // 获取页面的高度
				console.log(pageHeight, windowHeight)
				const distanceToBottom = pageHeight - scrollTop - windowHeight - statusBarHeight // 计算页面距离底部的距离
				//console.log(distanceToBottom)
				if (distanceToBottom <= 0) {
					// 页面滚动到了底部，隐藏底部的浮标
					console.log("到底部了")
					if (_this.loadMore || _this.page == 1) {
						if(!_this.loading){
							_this.page++;
							_this.getBulletins()
						}						
					}
				}
			})

		},

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK