mp_exhibitor_miniprog/components/common/u-scroll-view/index.vue

<template>
	<scroll-view class="u-scroll-view" :scroll-y="true" :style="pageScrollStyle" @scrolltolower="onScrollToLower" @scroll="onScroll">
		<slot></slot>
		<view v-if="loadMore" class="load-more"><van-loading>加载中...</van-loading></view>
	</scroll-view>
</template>

<script>
	
	import VanLoading from '@/wxcomponents/vant/loading/index'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			VanLoading
		},
		props: {
			tabbarConflict: Boolean,
			showEmpty: {
				type: Boolean,
				default: false
			},
			loadMore: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			pageScrollStyle() {
				let pageHeight = this.$config.pageHeight
				if (this.tabbarConflict) {
					pageHeight = this.$config.pageHeight - uni.upx2px(150)
				}
				return 'height: ' + pageHeight + 'px'
			}
		},
		watch: {
		},
		data() {
			return {}
		},
		created() {
		},
		mounted() {
		},
		methods: {
			getScrollViewHeight() {
				// 获取 scroll-view 元素的高度
				uni.createSelectorQuery()
					.in(this)
					.select('.u-scroll-view') 
					.boundingClientRect(rect => {
						console.log(rect)
						console.log('scroll-view 高度:', rect.height)
					})
					.exec()
			},
			onScroll(e) {
				uni.createSelectorQuery()
					.in(this)
					.select('.u-scroll-view')
					.boundingClientRect(rect => {
						const scrollTop = e.detail.scrollTop
						if (scrollTop + rect.height + 100 > e.detail.scrollHeight) {
							if (this.timer) {
								clearTimeout(this.timer)
								this.timer = null
							}
							this.timer = setTimeout(() => {
								this.$emit('scrollNearLower', e)
							}, 50)
						}
					})
					.exec()
				this.$emit('scroll', e)
			},
			onScrollToLower(e) {
				this.$emit('scrolltolower', e)
			}
		}
	}
</script>
<style lang="scss">
	.load-more{
		display: flex;
		justify-content: center;
		.van-loading__text{
			font-size: $fontSize2;
		}
	}
</style>