discounts-minapp/components/zs-list/index.vue

<!-- 滚动加载的list -->
<template>
	<view class="zs-list" :style="{marginTop:mt}">
			<slot></slot>
		<zs-load-more class="more" :status="status"  />
	</view>
</template>

<script>
	export default {
		props: {
			mt: {
				type: String,
				default: '100rpx'
			},
			status: {
				type: String,
				default: 'more'
			},
		},
		data() {
			return {
				Observer: null, //监听相交对象
			}
		},
		methods: {
	
		},
		onReady() {
			this.Observer = uni.createIntersectionObserver(this)
			this.Observer.relativeToViewport({
				bottom: 0
			}).observe('.more', (res) => {
				if (this.status == 'loading') return
					this.$emit('load')
			})
		},
		beforeDestroy() {
			this.Observer.disconnect()
		}
	}
</script>

<style lang="scss" >
.zs-list{
		// height: calc(100vh - 100rpx);
		// overflow: auto;
		// margin-top: 100rpx;
	
		.more{
			width: 100%;
		}
}
</style>