> 雙聯動屬于一個常見的需求組件，左右的元素可進行聯動定位  > 主要用到了scroll-view一下特性 > 1. scroll-into-view 滾動到指定id的元素位置 > 2. scroll-with-animation 滾動使用動畫效果 > 3. @scrolltolower 滾動至底部 > 4. @scroll 滾動事件（~~當滾動時，定位的scrollTop在元素區間位置進行聯動定位，邏輯實現~~） > 官網文檔：https://uniapp.dcloud.io/component/scroll-view ``` <template> <view class="m-conatiner"> <view class="left"> <view :class="{activeClass:currentIndex == index}" v-for="(item,index) in list" :key="index" @click="setViewId(index)">{{item.title}}</view> </view> <view class="right"> <scroll-view scroll-y="true" :scroll-into-view="viewId" scroll-with-animation @scroll="scroll" @scrolltolower="scrolltolower" style="white-space: nowrap;height: 400rpx;" > <view v-for="(item, index) in list" :key="index"> <view class="title" :id="'title'+index">{{item.title}}</view> <view v-for="(it,idx) in item.alist" :key="idx">{{it}}</view> </view> </scroll-view> </view> </view> </template> <script> export default { data() { return { list: [ {title:'中餐',alist: ['饅頭','包子','蓋飯','炒面','餃子','雞排飯']}, {title:'西餐',alist: ['牛排','意大利面','披薩','漢堡']}, {title:'法餐',alist: ['鵝肝1','鵝肝2','鵝肝3','鵝肝4','鵝肝5','鵝肝6','鵝肝7','鵝肝8','鵝肝9','鵝肝10']} ], viewId: '', currentIndex: 0, topList: [] } }, onLoad() { }, onReady(){ this.getNodeInfo(); }, methods: { setViewId(index) { // 點擊左邊標題 觸發事件 動態改變左邊標題的id this.viewId = 'title'+index; this.currentIndex = index; }, scroll(e) { // 右邊滾動觸發事件 獲取每個標題間的距離，判斷滾動的高度在哪個區間內 let scrollTop = e.target.scrollTop+1; for(let i=0; i<this.topList.length; i++) { const h1 = this.topList[i]; let h2 = this.topList[i+1]; if (scrollTop >= h1 && scrollTop < h2){ this.currentIndex = i; } } }, scrolltolower(){ // 滾動到底部觸發 setTimeout(()=> { this.currentIndex = this.list.length -1; },80) }, getNodeInfo(){ // 獲取DOM 取得每個標題間的高度。exec執行 let query = uni.createSelectorQuery().in(this); query.selectAll('.title').boundingClientRect(data => { console.log("得到布局位置信息",data,); let arr = []; data.map(item=>{ arr.push(item.top) }) this.topList = arr; }).exec(); } } } </script> <style lang="scss"> .m-conatiner{ width: 100%; height: 400rpx; border: 2rpx solid #ddd; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; } .left{ flex: 0 0 200rpx; height: 100%; border: 2rpx solid red; .activeClass{ background: pink; } } .right{ flex: 1; height: 100%; border: 2rpx solid red; .title{ font-size: 40rpx; font-weight: bold; background: pink; } } </style> ```