<template>
	<view class="container">
		<view class="page-body">
			<view class="page-section message">
				<view>当前滚动方向 -> {{ dir === 'top' ? '向上' : dir === 'bottom' ? '向下' : dir === 'nav' ? '顶' : '底' }}</view>
				<view>当前激活的item -> {{ notic }}</view>
			</view>
			<scroll-view :display-multiple-items="subItem1.length" scroll-x="true" :scroll-into-view="notic" class="sc"
				scroll-with-animation>
				<view v-for="item in subItem1" :id="`item-${item}`" :key="item" :current-item-id="`item-${item}`"
					@click="useClick(`item-${item}`)" class="sc-item" :class="{ active: `item-${item}` === notic }">
					{{item}}</view>
			</scroll-view>
			<view class="page-section">
				<scroll-view enhanced @scroll="scroller" class="scroll-view" scroll-y @scrolltolower="add"
					@scrolltoupper="reset" :scroll-into-view="navId">
					<view :data-next-id="`item-${item+1 > subItem.length ? item : item+1}`" v-for="item in subItem"
						:class="item === 3 && 'small'" class="ball" :id="`item-${item}`" :key="item" :data-id="item">
						{{item}}</view>
				</scroll-view>
			</view>
		</view>
	</view>


</template>


<script>
	export default {
		data: () => ({
			appear: false,
			subItem: [],
			subItem1: [],
			dir: 'nav',
			notic: 'item-1',
			navId: 'item-1',
			cachTop: 0,
			onClick: false
		}),
		created() {
			/// 设置当前数量
			const idx = 10
			for (let i = 0; i < idx; i++) {
				this.subItem.push(i + 1)
				this.subItem1.push(i + 1)
			}
		},
		onLoad() {


			this.observe()
		},
		onUnload() {},
		methods: {
			desc() {
				if (this._observer) this._observer.disconnect()
			},
			observe() {
				this._observer = wx.createIntersectionObserver(this, {
					observeAll: true
				})
				this._observer
					.relativeTo('.scroll-view')
					.observe('.ball', (res) => {
						if (!this.onClick) {
							let _id = this.notic
							if (this.dir === 'top') {
								/// 关注谁出现
								if (res.intersectionRatio > 0) {
									_id = res.id
								}
							}


							if (this.dir === 'bottom') {
								/// 关注谁消失，然后下一个进入
								if (res.intersectionRatio === 0) {
									_id = res.dataset.nextId
								}
							}
							this.setNavId(_id)
						} else {
							this.navId = this.notic
						}


					})
			},
			setNavId(id) {
				console.log(id)
				this.notic = id
			},
			scroller(e) {
				this.$nextTick(() => {
					const top = e.detail.scrollTop
					if (top > this.cacheTop) {
						this.dir = 'bottom'
					} else {
						this.dir = 'top'
					}
					this.cacheTop = top
					/// 结束的时候把全局的干掉
					this.onClick = false
				})
			},
			reset() {
				this.cacheTop = 0
				this.dir = 'nav'
			},
			useClick(item) {
				this.onClick = true
				this._observer && this._observer.disconnect()
				this._observer = null
				this.$nextTick(() => {
					this.notic = item
					this.observe()
				})
			},
			add(e) {
				// if(this.isLoad) return
				// this.subItem = []
				// this.$nextTick(() => {
				// 	this.subItem.push(...[1,2,3, 4,5,6])			
				// 	this.isLoad = true
				// 	this.desc()
				// 	this.$nextTick(() => {
				// 		this.observe()
				// 	})
				// })
			}
		}
	}
</script>


<style>
	.scroll-view {
		height: 1000rpx;
		background: #fff;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}


	.scroll-area {
		height: 1300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: .5s;
	}


	.notice {
		margin-top: 150rpx;
	}


	.ball {
		width: 400rpx;
		height: 400rpx;
		background: #1AAD19;
		font-size: 100rpx;
		border-radius: 50%;
		color: red;
		text-align: center;
		line-height: 400rpx;
	}


	/* 		.ball.small {
			width: 400rpx;
			height: 100rpx;
			line-height: 100rpx;
		} */


	.message {
		width: 100%;
	}


	.message text {
		font-size: 40rpx;
		font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
	}


	.sc {
		display: flex;
		height: 200rpx;
		overflow-y: scroll;
	}


	.sc-item {
		padding: 10px;
		border: 1px solid #ccc;
		margin: 10px;
		display: inline-block;
	}


	.sc-item.active {
		color: #fff;
		border: #1AAD19;
		background: #1AAD19;
	}
</style>

代码是用uni-app写的很简单。下面的是效果，快速拖动的时候，有可能有时候会漏掉一些监听。。这代码提交怎么成这样了。。。见了鬼