效果以下：

<scroll-view scroll-y="true" style='height:100%;'>
  <view wx:for="{{cates}}" class="nav-item {{ index === navActive ? 'active':'' }}" wx:key="{{index}}" data-index="{{index}}"
    catchtap='chooseType' data-id='type{{index}}'
  >
    {{item.typeName}}
    
    <view class='Badge' wx:if="{{item.num > 0}}">{{item.num}}</view>
  </view>
</scroll-view>

一 ：點擊分類內容區域對應滾動

動態綁定navActive的值，來決定哪一個分類被選中，選中類則爲active,不然爲空，將選中樣式寫到active裏。
而後爲點左邊右邊跳到相應商品，這裏主要用到的錨點，小程序在scroll-view裏提供了一個scroll-into-view

<scroll-view scroll-y="true" style='height:{{conHeight}}rpx;' scroll-into-view="{{contentActive}}" scroll-with-animation="true"      bindscroll="onScroll">
  <block wx:if="{{retlist.length > 0}}">
    <view class='contlist' wx:for="{{retlist}}" wx:key="key" wx:for-index="parentIndex">
      <view class='title' id='type{{parentIndex}}'>{{item.typeName}}</view>
      <view wx:for="{{item.goodsList}}" wx:for-item="goods" wx:key="key" class='goodsItem'>
        <view class="icon">
          <image src="{{goods.goods_pic}}" style="width: 120rpx;height: 120rpx" data-id="{{goods.id}}" bindtap="togglePopup"></image>
        </view>
        <view class='info'>
          <view class='head flex'>
            <text class='name'>{{goods.goods_name}}</text>
            <text class='extra' wx:if="{{item.typeName==='特惠商品'}}">僅剩{{goods.left_num}}份</text>
          </view>
          <view class='foot flex flex-cross-center'>
            ...
          </view>
        </view>
      </view>
    </view> 
  </block>   
  <block wx:else>
    <view>暫無商品</view>
  </block>
</scroll-view>

scroll-into-view就是內容欄的一個鉤子,經過控制contentActive的值來控制內容欄的顯示。
滾動的問題好解決，那麼聯動呢？咱們須要的聯動必須是左右相互的，即點擊導航欄，內容會跟着滾動到對應的位置，滑動內容區域，導航欄也會有對應的動做，好比高亮。
小程序的組件屬性中有一個scroll-into-view的屬性

//點擊導航欄時就能夠經過小程序的方法拿到id和該項目的索引，並賦值
chooseType:function(e){ //分類選擇
    // console.log(e)
    let dataSet = e.currentTarget.dataset;
    this.setData({
      navActive: dataSet.index,
      contentActive:dataSet.id,
    })
  },

這樣經過點擊導航欄，內容也會自動滾動到指定位置了，而且導航欄對應的標題高亮效果

二：反過來，右邊聯動左邊就比較麻煩了，小程序沒有提供反向聯動的功能，只能本身實現了。**

這裏的綁定的高度是scroll-view的高度，由於我這裏有240的head和150的foot，因此才減-240-150，請根據實際狀況決定寫法
wx.getSystemInfo({
  success: function (res) {
    let windowHeight = (res.windowHeight * (750 / res.windowWidth)); //將高度乘以換算後的該設備的rpx與px的比例
    //console.log(windowHeight) //最後得到轉化後得rpx單位的窗口高度
    _this.setData({
      conHeight: windowHeight-240-150,
    })
  }
})

得到每一個元素據頂部的高度，組成一個數組，經過高度與scrollTop的對比來知道目前滑動到那個區域
let heightArr = [];
let h = 0;
//建立節點選擇器
const query = wx.createSelectorQuery();
//選擇id
query.selectAll('.contlist').boundingClientRect()
query.exec(function (res) {
  //res就是 全部標籤爲contlist的元素的信息 的數組
  res[0].forEach((item) => {
    h += item.height;
    heightArr.push(h);
  })
  _this.setData({
    heightArr: heightArr
  })
  // console.log(heightArr)
})

1.當scroll-view滾動的時候，就能夠獲取到滾動的距離，並動態計算滾動區間，是在heightArr的哪一個區間裏面，並返回對應的索引。
2.由於是經過實時監控來判斷的，若是判斷完了之後就綁定數據的話，就會不停的setData,因此我這裏設置了一個lastActive,只有每次被選中分類變的時候，纔會setData

onScroll:function(e){
    const scrollTop = e.detail.scrollTop;
    const scorllArr = this.data.heightArr;
    const _this = this;
    if (scrollTop >= scorllArr[scorllArr.length - 1 ] - (_this.data.conHeight/2)){
      return;
    }else{
      for(let i=0;i< scorllArr.length; i++){
        if(scrollTop >= 0 && scrollTop <scorllArr[0]){
          if (0 != _this.data.lastActive) {
            _this.setData({
              navActive: 0,
              lastActive:0,
            })
            }
        }else if( scrollTop >=scorllArr[i-1] && scrollTop <scorllArr[i]){
          if (i != _this.data.lastActive) {
            _this.setData({
              navActive: i,
              lastActive: i,
            })
          }
          
        }
      }
    }
  },

參考

http://www.javashuo.com/article/p-emnjogwb-ed.html
https://blog.csdn.net/weixin_42488377/article/details/81162676