1、html部分

<template>
	<view>
		<view class="left_right_column_box">
			<view class="left_column">
				<scroll-view :style="{height: viewHeight}" scroll-y="true" :scroll-top="scrollTop">
					<view v-for="item in titleContenData" :key="item.id"
						:class="{'left_column_for': true, activity: selectIndex==item.index?true:false}"
						@click="clickTitle(item)">
						{{item.title}}
					</view>
				</scroll-view>
			</view>

			<view class="right_column">
				<scroll-view :style="{height: viewHeight}" scroll-y="true" :scroll-into-view="selectId"
					scroll-with-animation="true" @scroll="scroll">
					<view :id="item.id" class="floorType right_title_content_for" v-for="item in titleContenData"
						:key="item.id">
						<view class="right_title">{{item.title}}</view>
						<view v-for="items in item.contents" :key="items.id">{{items.content}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

2、JavaScript部分

// 防抖
let timer = undefined;

export default {
	data() {
		return {
			// 屏幕高度
			viewHeight: null,
			// 源數據
			titleContenData: [],
			// 設置錨點
			selectId: 'id1',
			// 設置高亮
			selectIndex: 0,
			// 設置左欄頂部距離
			scrollTop: 0,
		}
	},

	mounted() {
		let that = this;
		uni.getSystemInfo({
			success: function({
				windowHeight
			}) {
				that.viewHeight = windowHeight + 'px';
			}
		});

		// 創建數據
		that.createData();

		// 此處使用$nextTick是非常有必要
		// 官方建議
		// 實際測試如果不用會報錯
		that.$nextTick(function() {
			const query = uni.createSelectorQuery().in(that);

			query.selectAll('.floorType').boundingClientRect(VNodeAll => {
				VNodeAll.forEach(({
					top
				}, i) => {
					// 獲取并存儲每個視圖到頂部的距離
					this.titleContenData[i].viewTop = top;
				});
			}).exec();

			console.log('titleContenData:', this.titleContenData);
		});
	},

	methods: {
		// 滾動時觸發
		scroll({
			detail: {
				scrollTop
			}
		}) {
			let that = this,
				titleContenData = that.titleContenData;

			// 防抖
			// timer定義在全局
			// 如果沒有防抖會觸發許多次
			// 對性能不友好
			if (timer !== undefined) clearTimeout(timer);

			timer = setTimeout(function() {
				// 當右側滾動到頂部時強制賦值為0
				// 因為在滾動時一般獲取到的數據是0-10的范圍
				// 小概率會獲取到0
				// 因為原先存儲viewTop屬性的第一個值就是0
				scrollTop = scrollTop < 10 ? 0 : scrollTop;
				let selectIndex = titleContenData.findIndex((item) => item.viewTop >= scrollTop);
				console.log('scrollTop:', scrollTop);
				// 設置高亮
				that.selectIndex = selectIndex;
				// 此屬性聯動左側滾動條
				// 當右側滾動時
				// 左側也會相應的滾動
				// 只是滾動的距離不一樣
				that.scrollTop = 5 * that.selectIndex;
			}, 70);
		},

		// 標題點擊事件
		clickTitle({
			id,
			index
		}) {
			console.log(id, index);
			// 設置錨點
			this.selectId = id;
			// 設置高亮
			this.selectIndex = index;
		},

		// 生成內容
		createContent(n) {
			let content = [];
			for (let i = 0; i < n; i++) content.push({
				id: i + 1,
				content: `內容${i+1}內容`
			});
			return content;
		},

		// 創建數據
		createData() {
			// 生成標題
			for (let i = 0; i < 24; i++) this.titleContenData.push({
				// 因為需要綁定id作為錨點目標
				// 所以不能以數字開頭
				id: `id${i+1}`,
				index: i,
				title: '標題' + (i + 1),
				contents: this.createContent(parseInt(Math.random() * 24 + 1, 10))
			})
		}
	},
}

3、css部分

/* 公共樣式 */
.left_right_column_box {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}

/* 左側樣式 */
.left_column {
	flex: 1;
}

.left_column_for {
	text-align: center;
	padding: 10rpx 0;
}

.activity {
	color: #000fff;
}

/* 右側樣式 */
.right_column {
	flex: 3;
	margin-left: 36rpx;
}

.right_title_content_for {
	margin-top: 36rpx;
}

.right_title_content_for:first-child {
	margin-top: 0;
}

.right_title {
	font-weight: 700;
}

/* 隱藏scroll-wiew元素的滾動條 */
scroll-view ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
}