uniapp里实现列表tab对应内容滚动以及定位内容

特殊原因，就不上图了

需求：列表tab和内容均为竖向，左侧列表tab，右侧内容列，内容包含一个标题和内容，当滚动到里面的标题到顶部时，左侧列表tab指向对应的tab标题，且点击左侧列表tab也可以自动定位到右侧内容子标题处

思路：onload时读取每个右侧元素高度，定位跳转即可

首先是一层竖向scroll-view，滚动和监听需要用到，套在右边

<scroll-view class="scroller" @scroll="scrolls" @scrolltolower="scrolltolower"
						:scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">

右侧每一块的内容id标注为sym+数字，列表循环时请将该id加1，初始为sym0

左侧每一项绑定一个方法和一个参数以及样式，该样式为一个数组，请自行开局初始化填充，长度和列表内容一致即可。这里的数从0开始，往下递增，列表循环时请替换成变量

@click="left_sym_change(0);toView='sym0'" :class="left_sym_style[0]"

然后是left_sym_change这个方法，只是改变样式的，识别到底触发哪项

left_sym_change(index) {
				this.left_sym_style.fill('')
				this.left_sym_style.splice(index, 1, 'sym_selected')
			},

然后是onload里，需要弄个获取右侧每个元素高度的方法

            var header_height;
            uni.createSelectorQuery().select('.header_content').boundingClientRect(data => {
                header_height = data.height
            }).exec();
            uni.createSelectorQuery().selectAll('.sym_type').boundingClientRect().exec((res) => {
                let nodes = res[0]
                let rel = [];
                nodes.map(item => {
                    rel.push(item.top - header_height - 110 - 49)
                })
                this.leftList = rel
                // console.log(rel)
            })

需要注意的是，我这里选择header_content获取其高度并且在item.top减去一些元素高度，是因为滚动的那个东西并不在页面最顶端，所以需要减去上面多余的东西的元素高度才能准确定位滚动里的元素高度。

然后是和滚动相关的代码

scrolls(e) {
				let scrollTop = e.target.scrollTop
				for (let i = 0; i < this.leftList.length; i++) {
					let h1 = this.leftList[i]
					let h2 = this.leftList[i + 1]
					if (scrollTop >= h1 && scrollTop < h2) {
						this.left_sym_change(i)
					}
				}
			},
scrolltolower() {
				setTimeout(() => {
					this.left_sym_change(this.shexia_num - 1)
				}, 80)
			},

然后就差不多可以完成了，细节就不补了，希望下次用不上