微信小程式利用scroll-view實現左右聯動，供大家參考，具體內容如下

點選左邊的按鈕時，右邊可以跳動到指定的位置

• 首先要注意使用scroll-sipbvKview豎屏滾動，需要給scroll-view固定高度
  
• 其次在點選時，需要給需要滾動的scroll-view加上scroll-into-view,其值應該是子元素的id,且id不能以數字 開頭
  

滾動右邊，左邊選單跳到相應的位置

• 其實現的思想是，在右邊滾動屏滾動時，得到滾動的距離。將右邊滾動屏中各模組到達頂部的距離計算出來放到一個數組中。第一個模組的滾動距離是本身的高度，第二個模組的滾動距離是第一個模組的高度加上自身的高度，以此類推。滾動時，判斷滾動距離在儲存好的陣列中的哪個階段，並以此得出符www.cppcns.com
  合條件的下標值，將左側選單對應的下標中的值做改動，就可以實現左右聯動。
  
• 計算各模組的高度時，獲取元素需要使用wx.createSelectorQuery()，其返回selectorQuerys物件例項；再利用返回來的節點的boundingClientRect(function callback)方法獲取節點的佈局位置資訊，在SelectorQuery.exec()執行後，將資訊返回在回撥函式中。本文中將獲取元素高度的方法寫在了onloawww.cppcns.comd中。

實現效果圖：

主要程式碼如下：

index.wxml

<view class="container">
  <view class="category-left">
    <scroll-view scroll-y="true" style="height:100%">
      <block wx:for="{{category}}" wx:key="id">
       <view class="catgegory-item {{activeId === item.id?'active-item':''}}" data-id="{{item.id}}" bindtap="clickItem">{{item.name}}</view>
      </block>
    </scroll-view>
  </view>
  <view class="category-right">
    <scroll-view scroll-y="true" style="height:100%" scroll-into-view="{{toView}}" scroll-with-animation="ture" bindscroll="scroll">
      <view class="categoty-detail">
      <block wx:for="{{content}}" wx:key="id">
        <view class="catefory-main">
          <view class="category-title" id="{{item.id}}">{{item.title}}</view>
          <view class="category-content">
              <view class="content-item" wx:for="{{item.options}}" wx:for-item="i" wx:key="id">
                <image src="{{i.src}}"></image>
                <text>{{i.text}}</text>                                                      
              </view>
          </view>
        </view> 
      </block>
      </view>
    </scroll-view>
  </view>
</view>

index.jwww.cppcns.coms

//index.
//獲取應用例項
const app = getApp()

Page({
  data: {
    toView: 'a1',activeId: 'a1',category: [
      {name: '新品',id: 'a1'},{ name: '眾籌',id: 'a2' },{ name: '小米手機',id: www.cppcns.com'a3' },{ name: 'redmi手機',id: 'a4' },{ name: '黑鯊遊戲',id: 'a5' },{ name: "手機配件",id: 'a6' },{ name: '電視',id: 'a7'},{ name: '電腦',id: 'a8' },],content: [
      {
        title: '- 新品 -',options: [
          { src: '../../image/redmi.png',id: '001',text: 'redmi8'},{ src: '../../image/redmi.png',id: '002',text: 'redmi8A' },id: '003',text: '小米9pro 5G'},id: '004',id: '005',text: 'redmi8' }
        ],id: 'a1'
      },{
        title: '- 眾籌 -',options: [
          { src: '../../image/zhongchou.png',id: '006',text: 'redmi8' },{ src: '../../image/zhongchou.png',id: '007',id: '008',id: '009',id: 'a2'
      },{
        title: '- 小米手機 -',options: [
          { src: '../../image/xiaomi.png',{ src: '../../image/xiaomi.png',id: 'a3'
      },{
        title: '- redmi手機 -',options: [
          { src: '../../image/hongmi.png',{ src: '../../image/hongmi.png',id: 'a4'
      }

    ],},//事件處理函式
  onLoad: function () {
    this.setData({
      toView: 'a1',heightArr: []
    })
    let query = wx.createSelectorQuery();
    query.selectAll('.catefory-main').boundingClientRect((rect)=> {
      rect.forEach(ele => {
        this.calculateHeight(ele.height);
      })
    }).exec();
  },clickItem(e) {
    this.setData({
      activeId: e.currentTarget.dataset.id,toView: e.currentTarget.dataset.id
    })
  },scroll(e) {
    let scrollHeight = e.detail.scrollTop;
    let index = this.calculateIndex(this.data.heightArr,scrollHeight);
    this.setData({
      activeId: 'a'+index
    })

  },// 計算滾動的區間
  calculateHeight(height) {
    if(!this.data.heightArr.length) {
      this.data.heightArr.push(height)
    }else {
      this.data.heightArr.forEach(ele => {
        height += ele
      })
      this.data.heightArr.push(height);
    }
  },// 計算左邊選中的下標
  calculateIndex(arr,scrollHeight) {
    let index= '';
    for(let i =0;i<arr.length;i++) {
      if (scrollHeight >= 0 && scrollHeight < arr[0]){
        index = 0;
      }else if(scrollHeight >= arr[i-1] && scrollHeight < arr[i]){
        index = i;
      }
    }
    return index+1;
  }
})

index.wxss

/**index.wxss**/
.container {
  padding: 0;
  width:100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.category-left {
  height: 100%;
  width: 22%;
  padding: 0 20rpx;
  box-sizing: border-box;
  border-right: 1px solid #efefef;
}
.catgegory-item {
  padding: 20rpx 0;
  font-size: 30rpx;
  text-align:  center;
}
.active-item {
  color: orange;
}
.category-right {
  flex:1;
  height: 100%;
}
.category-content {
  display: grid;
  grid-template-columns: repeat(auto-fill,190rpx);
}
.category-title {
  text-align: center;
}
.content-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  text-align: center;
  font-size: 30rpx;
}
.content-item image{
  width: 120rpx;
  height: 120rpx;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。