uniapp上实现左右关联滚动

先看效果：

代码：

<template><view class="container"><!-- 左侧fixed导航区域 --><view class="left"><viewv-for="item in leftList":key="item.id"class="left_item":class="item.id == selectedId ? 'selected' : ''"@click="leftItemClick(item.id)">{{ item.title }}</view></view><!-- 右侧内容区域 --><view class="right"><view v-for="item in rightList" :key="item.id" class="right_item">{{ item.content }}</view></view></view>
</template><script>
export default {data() {return {leftList: [],rightList: [],selectedId: 1, //左边当前选中iditemTopArr: [], //右侧所有item的top数组};},onLoad() {this.initData();this.getItemTopArr();},//页面滚动监听onPageScroll(e) {let scrollTop = e.scrollTop;console.log("scrollTop = " + scrollTop);for (let i = 0; i < this.itemTopArr.length; i++) {if (scrollTop >= this.itemTopArr[i]) {this.selectedId = this.rightList[i].parentId;console.log("selectedId = " + this.selectedId);}}},methods: {//左侧item点击leftItemClick(id) {this.selectedId = id;let index = 0;for (let i = 0; i < this.rightList.length; i++) {if (this.rightList[i].parentId == id) {index = i;break;}}//将页面滚动到目标位置uni.pageScrollTo({scrollTop: this.itemTopArr[index],duration: 300, //滚动动画时长});},//获取右侧所有item的top数组getItemTopArr() {this.$nextTick(() => {const query = uni.createSelectorQuery().in(this);const nodesRef = query.selectAll(".right > .right_item");nodesRef.fields({size: true,rect: true,scrollOffset: true,},(res) => {res.forEach((item) => {this.itemTopArr.push(item.top);});console.log(this.itemTopArr);}).exec();});},//初始化数据源initData() {for (let index = 1; index < 10; index++) {for (let i = 1; i < 4; i++) {this.rightList.push({id: index + "-" + i,parentId: index,content: "content-" + index,});}this.leftList.push({id: index,title: "title-" + index,});}},},
};
</script><style lang="scss" scoped>
.container {position: relative;min-height: 100vh;background: #fff;.left {position: fixed;width: 120px;height: 100%;min-height: 100vh;overflow: auto;float: left;background: #f2f2f2;.left_item {width: 100%;height: 60px;text-align: center;line-height: 60px;}.selected {background: #fff;font-weight: bold;color: #07c160;}}.right {margin-left: 120px;width: calc(100vw - 120px);overflow: auto;.right_item {width: 100%;height: 200px;text-align: center;line-height: 200px;font-size: 24px;border-bottom: 1px solid #ccc;box-sizing: border-box; //padding、border不影响元素的宽高}}
}
</style>

---

官方onPageScroll方法的使用注意事项（见上图）里说不要在此方法里写复杂的交互，故将onPageScroll里的for循环改写到滚动结束执行：

<template><view class="container"><!-- 左侧fixed导航区域 --><view class="left"><viewv-for="item in leftList":key="item.id"class="left_item":class="item.id == selectedId ? 'selected' : ''"@click="leftItemClick(item.id)">{{ item.title }}</view></view><!-- 右侧内容区域 --><view class="right"><view v-for="item in rightList" :key="item.id" class="right_item">{{ item.content }}</view></view></view>
</template><script>
export default {data() {return {leftList: [],rightList: [],selectedId: 1, //左边当前选中iditemTopArr: [], //右侧所有item的top数组timeoutID: null,};},onLoad() {this.initData();this.getItemTopArr();},//页面滚动监听onPageScroll(e) {let scrollTop = e.scrollTop;console.log("scrollTop = " + scrollTop);clearTimeout(this.timeoutID);this.timeoutID = setTimeout(() => {console.log("结束滚动");for (let i = 0; i < this.itemTopArr.length; i++) {if (scrollTop >= this.itemTopArr[i]) {this.selectedId = this.rightList[i].parentId;console.log("selectedId = " + this.selectedId);}}}, 100);},methods: {//左侧item点击leftItemClick(id) {this.selectedId = id;let index = 0;for (let i = 0; i < this.rightList.length; i++) {if (this.rightList[i].parentId == id) {index = i;break;}}//将页面滚动到目标位置uni.pageScrollTo({scrollTop: this.itemTopArr[index],duration: 300, //滚动动画时长success: (res) => {console.log(res);console.log("scroll success");},fail: (err) => {console.log(err);console.log("scroll fail");},});},//获取右侧所有item的top数组getItemTopArr() {this.$nextTick(() => {const query = uni.createSelectorQuery().in(this);const nodesRef = query.selectAll(".right > .right_item");nodesRef.fields({size: true,rect: true,scrollOffset: true,},(res) => {res.forEach((item) => {this.itemTopArr.push(item.top);});console.log(this.itemTopArr);}).exec();});},//初始化数据源initData() {for (let index = 1; index < 10; index++) {for (let i = 1; i < 4; i++) {this.rightList.push({id: index + "-" + i,parentId: index,content: "content-" + index,});}this.leftList.push({id: index,title: "title-" + index,});}},},
};
</script><style lang="scss" scoped>
.container {position: relative;min-height: 100vh;background: #fff;.left {position: fixed;width: 120px;height: 100%;min-height: 100vh;overflow: auto;float: left;background: #f2f2f2;.left_item {width: 100%;height: 60px;text-align: center;line-height: 60px;}.selected {background: #fff;font-weight: bold;color: #07c160;}}.right {margin-left: 120px;width: calc(100vw - 120px);overflow: auto;.right_item {width: 100%;height: 200px;text-align: center;line-height: 200px;font-size: 24px;border-bottom: 1px solid #ccc;box-sizing: border-box; //padding、border不影响元素的宽高}}
}
</style>