uniapp -- 實現雙聯動

<view class="content">
         <view class="left">
                <view v-for="(item,index) in list" :key="index" 
 @click="setClickId(index)" 
 :class="{active:index===currentIndex}">{{item.title}}
 </view>
           </view>
             <view class="right">
                <scroll-view scroll-y :scroll-into-view="clickId" scroll-with-animation @scroll="scroll" @scrolltolower="lower">
                    <view v-for="(item1,index1) in list" :key="index1">
                        <view class="title" :id="'cur'+index1">{{item1.title}}</view>
                      <view v-for="(item2,index2) in item1.list" :key="index2"> {{item2}} </view>
                     </view>
                 </scroll-view>
            </view>
  </view>

js代碼:

 1 <script>
 2     export default { 3 data() { 4             return { 5 list: [{ 6                         title: "快餐", 7                         list: ["蓋飯", "臭豆腐", "涼皮", "肉夾饃"] 8 }, 9 { 10                         title: "西餐", 11                         list: ["牛排", "紅酒", "漢堡", "雞排"] 12 }, 13 { 14                         title: "法餐", 15                         list: ["蝸牛", "沙拉", "鵝肝", "紅酒"] 16 }, 17 { 18                         title: "中餐", 19                         list: ["炸雞", "烤鴨", "木桶飯", "餃子"] 20 } 21 ], 22                 clickId: "", // 點擊左側菜單右側菜單滑動
23                 currentIndex: 0, // 點擊左側添加樣式
24 topList: [], 25 } 26 }, 27 onReady() { 28             this.getNodesInfo(); 29 }, 30 methods: { 31 setClickId(index) { 32                 this.clickId = "cur" + index; 33                 this.currentIndex = index; 34 }, 35 scroll(e) { 36                 // console.log(e);
37                 let scrollTop = e.target.scrollTop; 38                 for(let i = 0; i < this.topList.length;i++){ 39                     let h1 = this.topList[i]; 40                     let h2 = this.topList[i+1]; 41                     if(scrollTop >= h1 && scrollTop < h2){ 42                         this.currentIndex = i; 43 } 44 } 45 }, 46             // 滾動到底部
47 lower(){ 48                 setTimeout(()=>{ 49                     this.currentIndex =3; 50                 },100) 51 }, 52             // 獲取節點的scrollTop數組
53 getNodesInfo() { 54                 const query = uni.createSelectorQuery().in(this); 55                 query.selectAll('.title').boundingClientRect().exec(data => { 56                     // console.log(data);
57                     let res = data[0]; 58                     let rel = []; 59                     res.map(item=>{ 60 rel.push(item.top); 61 }); 62                     this.topList = rel; 63                     console.log(this.topList); 64 }); 65 } 66 } 67 } 68 </script>

樣式：

 1 <style lang="scss"> 2 .content { 3 display: flex; 4 .left { 5 width: 100px; 6 border: 1px solid #f00; 7 } 8 .right { 9 flex: 1; 10 border: 1px solid #f00; 11 scroll-view { 12 height: 200px; 13 .title { 14 font-size: 16px; 15 font-weight: 600; 16 background: #ffb6c1; 17 } 18 } 19 } 20 } 21 .active { 22 background: #ffb6c1; 23 } 24 </style>