最近公司項(xiàng)目趕進(jìn)度，有點(diǎn)忙，或許更新不及時(shí)，望見諒（雖然也沒有多少人會(huì)看-.-）
小程序左右互聯(lián)進(jìn)階
一、左右互聯(lián)的關(guān)鍵技術(shù)：
(1) 小程序 wxss 中使用 rpx，而 js 中 scrollTop 獲取到的值是 px，所以存在rpx 轉(zhuǎn) px 的問題。以 iPhone6 為基準(zhǔn)，轉(zhuǎn)換公式：

// percent 為當(dāng)前設(shè)備1rpx對應(yīng)的px值
var percent = res.windowWidth / 750;

(2) 微信自帶scroll-view UI組件，通過 bindscroll="scroll" 綁定滾動(dòng)事件；通過 scroll-top="{{scrollTop}}" 動(dòng)態(tài)控制 左側(cè)滑欄的被動(dòng)滾動(dòng).
二、如何實(shí)現(xiàn)：
通過計(jì)算整個(gè)右側(cè)滑欄滾動(dòng)上去的高度 與 右側(cè)滑欄中每一個(gè)分類距頂部的距離做比對，獲取到該滾動(dòng)置頂?shù)姆诸惖?index 。然后用獲取到的 index 乘以左側(cè)滑欄中某一項(xiàng)的高度，動(dòng)態(tài)賦值給左側(cè)滑欄內(nèi)的 scrollTop ，控制左側(cè)滑欄的聯(lián)動(dòng)。
以下是代碼，考慮到與我一樣剛開始新手同學(xué)，所以幾乎為每一行代碼添加了注釋。
wxml代碼：標(biāo)簽中屬性如有不懂，請自行查看小程序API，內(nèi)有詳細(xì)講解！

<view class="container">  
  <!--左側(cè)欄-->
  <scroll-view class='scroll_left' scroll-y="true" style="height:{{winHeight}}px;" scroll-with-animation="true" scroll-top="{{scrollTop}}">
    <view class="nav_left"> 
      <block wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this">  
        <!--當(dāng)前項(xiàng)的id等于item項(xiàng)的id，那個(gè)就是當(dāng)前狀態(tài)-->  
        <!--用data-index記錄這個(gè)數(shù)據(jù)在數(shù)組的下標(biāo)位置，使用data-id設(shè)置每個(gè)item的id值，供打開2級頁面使用-->  
        <view class="nav_left_items {{curNav == idx ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}" id="{{idx}}">{{itemName[0].title}}</view>  
      </block>  
    </view>
  </scroll-view>

  <!--右側(cè)欄-->
  <scroll-view scroll-y="true" class="scroll_right" style="height:{{winHeight}}px;" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true" bindscroll="scroll">
    <view class="nav_right"> 
      <view class='mink' wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this">
        <view class='minl' id='{{idx}}'>{{itemName[0].title}}</view>
          <block wx:for="{{itemName}}" wx:key="*this" wx:for-index="idex"> 
            <view class="nav_right_items" wx:if="{{idex>0}}">  
              <navigator url="../detail/detail" hover-class="other-navigator-hover">
                <view>   
                  <image src="{{item.picture}}"></image>
                  <view >  
                    <text>{{item.desc}}</text>  
                  </view> 
                </view>  
              </navigator>  
            </view>      
          </block> 
        </view>
      <view style="width:100%;height:30rpx;background:#f0f4f7"></view>       
    </view>
  </scroll-view>
</view>

js代碼

// pages/list-1/list-1.js
var list = require('../../utils/list.js')
Page({
  data: {
    // 左側(cè)點(diǎn)擊類樣式
    curNav: 'A',
    scrollTop: 0,
    // 定義一個(gè)空數(shù)組，用來存放右側(cè)滑欄中每一個(gè)商品分類的 Height
    listHeight:''
  },
  // 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  onReady: function () {
    var that = this;
    // 定義右側(cè)標(biāo)題的 rpx 高度 和 px 高度
    var right_titleRpxHeight = 60;
    var right_titleHeight;
    // 定義右側(cè)單個(gè)商品的 rpx 高度 和 px 高度
    var right_contentRpxHeight = 180;
    var right_contentHeight;
    // 定義左側(cè)單個(gè)tab的 rpx 高度 和 px 高度
    var left_titleRpxHeight = 140;
    var left_titleHeight;
    //  獲取可視區(qū)屏幕高度
    wx.getSystemInfo({
      success: function (res) {
        // percent 為當(dāng)前設(shè)備1rpx對應(yīng)的px值
        var percent = res.windowWidth / 750;
        that.setData({
          winHeight: res.windowHeight,
          right_titleHeight: Number(right_titleRpxHeight * percent),
          right_contentHeight: Number(right_contentRpxHeight * percent),
          left_titleHeight: Number(left_titleRpxHeight * percent)
        })
      }
    })
    // 把請求到的 list 中的數(shù)據(jù)賦值給  listChild1
    var listChild1 = list.List[0];
    // 定義一個(gè) names ，用于存放 scroll-into-view 使用的 id
    var names = '';
    // 循環(huán) listChild1 中的每一項(xiàng)
    for (var item in listChild1) {
      // 把 listChild1 中每一項(xiàng)的鍵值用“：”（便于后期處理）分隔開，存入 names 中，數(shù)據(jù)格式見圖‘names中的數(shù)據(jù)’
      names+= ":"+item;
      // 計(jì)算右側(cè)每一個(gè)分類的 Height 。
      // listChild1 下的每一個(gè) item 中包含該分類的 title，所以 listChild1[item].length 需要減一 
      // 右側(cè)每一個(gè)分類中每一行放兩個(gè)商品，所以 this.data.right_contentHeight 除二
      // 最后加上 right_titleHeight，此時(shí) height 為右側(cè)一個(gè)完整分類的高度
      var height = (listChild1[item].length - 1) * this.data.right_contentHeight / 2 + this.data.right_titleHeight;
      // 同上面 names 的道理，把每一個(gè) height 用“：”隔開放入 listHeight 中
      this.data.listHeight += ":" + height;
      this.setData({
        // 把 listChild1 賦值給 list ，供 wxml 中循環(huán)使用
        list: listChild1,
        listHeight:this.data.listHeight
      })
    }
    // 把 names 的數(shù)據(jù)切成數(shù)組
    var names = names.substring(1).split(':');
    this.setData({
      names:names
    })
  },
  // 右側(cè)滑欄的 bindscroll 事件函數(shù)（ES6寫法）
  scroll(event){
    // 把 listHeight 切割成數(shù)組
    var height = this.data.listHeight.substring(1).split(':');
    // 定義一個(gè) index 供左側(cè)邊欄聯(lián)動(dòng)使用
    var index = 1;
    var num = 0;
    for(var i = 0;i<height.length;i++){
      // 累計(jì)右側(cè)滑欄滾動(dòng)上去的每一個(gè)分類的 Height
        num+=parseInt(height[i]);
        // 循環(huán)判斷 num 是否大于右側(cè)滑欄滾動(dòng)上去的 Height ，然后 get 到 i 值賦給 index
        if (num > event.detail.scrollTop){
          index = i+1;
          // 如果右側(cè)滑欄滾動(dòng)高度小于單個(gè)類別高度的 1/2 時(shí)，index 為 0
          if (event.detail.scrollTop < height[0]/2) {
            index = 0;
          }
          break;
        }
    }
    // 定義并設(shè)置左側(cè)邊欄的滾動(dòng)高度
    var left_scrollTop = this.data.left_titleHeight*index
    this.setData({
      scrollTop: left_scrollTop,
      // 動(dòng)態(tài)給左側(cè)滑欄傳遞對應(yīng)該項(xiàng)的 id，用于高亮效果顯示
      curNav: this.data.names[index]
    })
  },
  //點(diǎn)擊左側(cè) tab ，右側(cè)列表相應(yīng)位置聯(lián)動(dòng) 置頂
  switchRightTab: function (e) {
    var id = e.target.id;
    this.setData({
      scrollTopId: id,
      // 左側(cè)點(diǎn)擊類樣式
      curNav:id,
    })
  }
})

樣式表和list數(shù)據(jù)在之前已經(jīng)說過了，這里就不多啰嗦了，如果有什么不懂或者哪位大神看到我沒考慮到的bug還望告訴我，我好去填坑0.0