uni实现小说阅读页面上下滑动翻页的顶部标题切换

<template>
	<view>
		<readSetting :directoryName="chapterNames" ref="readSetting" :book="reader['book']" @changePage="changePage"
			:isPageLoading="isPageLoading">
			<view style="width: 100%;">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll"
					@scrolltolower="lower" style="width: 100vw;">
					<muqian-lazyLoad class="textRead" :src="item.img_url" :indexs="index + 1" width="100vw"
						height="100%" :chapter_index="index + 1" v-for="(item, index) in contents" :key="item.img_url"
						@imageClick="imageClick"></muqian-lazyLoad>
					<!-- </view> -->
				</scroll-view>
			</view>
		</readSetting>
	</view>
</template>
<script>
	import readSetting from "@/components/readSetting/readSetting.vue"
	export default {
		components: {
			readSetting
		},
		data() {
			return {
				currentChapter: '',
				pages: 1, // 当前页码
				total: 1, // 全部页数
				chapterName: '', // 当前章节名称
				chapterNames: "",
				loading: true,
				contents: [],
				scrollTop: 0,
				windowWidth: 0,
				statusBarHeight: 0,
				triggered: true,
				_freshing: false,
				isPageLoading: false,
				currentCount: 1,
				rightDomsTop: []
			}
		},
		onReady() {
			setTimeout(() => {
				this.getOnlineContent(this.currentChapter, true)
			}, 100)
		},
		methods: {
			scroll(e) {
				this.rightDomsTop.forEach(v => {
					if (-v.top < e.detail.scrollTop) {
						this.chapterNames = v.chapter_name
						return false
					}
				})
			},
			getOnlineContent() {
				this.$api.getChapterDetail().then(res => {
					const {
						page_result,
						photo_list
					} = JSON.parse(res.data)
						this.contents = this.contents.concat(photo_list)
					this.$nextTick(() => {
						this.getElInfo({
							size: false,
							rect: true
						}).then(res => {
							let data = {
								...res,
								chapter_name: photo_list[photo_list.length - 1].chapter_name
							}
							this.rightDomsTop.push(data)
							this.chapterNames = this.rightDomsTop[this.rightDomsTop.length - 1]
								.chapter_name
						})

					})
				})
			},
			// 获取节点信息
			getElInfo(obj = {}) {
				return new Promise((res, rej) => {
					let option = {
						size: obj.size ? true : false,
						rect: obj.rect ? true : false,
						scrollOffset: obj.scrollOffset ? true : false,
					}
					const query = uni.createSelectorQuery().in(this);
					let q = query.select('.textRead')
					q.fields(option, data => {
						res(data)
					}).exec();
				})
			},
			lower: function(e) {
				//懒加载
			},


		}
	}
</script>

<style>
	.scroll-Y {
		height: 100vh;
	}

	.flex—info {
		display: flex;
		flex-direction: column;
	}
</style>

主要思路就是获取每一章加载后的top