微信小程序：菜單滑動

先演示一下效果以下：

1.左邊選擇類別，右邊菜單滑動到對應位置
該功能只須要用微信小程序的組件：scroll-view 中 scroll-into-view屬性便可，詳細請看官方文檔。

2.經過右邊拖動，左邊類別進行對應變換
該功能經過右方元素設置固定高度height，計算該類別所在的高度。而後經過scroll-view 中 bindscroll屬性，監測當前顯示類別進行切換。

wx.getSystemInfo({
      success: function (res) {
        self.setData({
          height: res.windowHeight,
          unitPx: res.windowWidth / 750 // 計算1rpx等於多少px
        });
      }
    });

經過wx.getSystemInfo獲取該手機的屏幕高度、寬度等。

.menu-container .menu-right .menu-detail-header {
  background: #ec6654;
  padding: 20rpx 5rpx;
  color: #fff;
  height:50rpx;
  line-height:50rpx;
}

.menu-container .menu-right .menu-detail-list {
  background-color: #fff;
  padding: 10rpx 5rpx;
  border-bottom: 1px solid #f8f8f8;
  position: relative;
  overflow: hidden;
  height:120rpx;
}

<!-- 右邊 -->
<scroll-view class="menu-right" style="height: 100%;" scroll-into-view="{{toView}}" scroll-y bindscroll="scroll">
    <view id="{{item.value}}" wx:for="{{menu_list}}">
      <view class="menu-detail-header">{{item.header}}</view>
      <view wx:for="{{item.food}}" class="menu-detail-list">
        <view class="menu-detail">
          <view>
            <image class="menu-detail-img" src="{{item.img}}"></image>
          </view>
          <view class="menu-detail-content">
            <view class="menu-detail-title">{{item.title}}</view>
            <view class="menu-detail-intro">{{item.intro}}</view>
            <view class="menu-detail-cost"><text class="text-red">{{item.cost}}</text>積分 </view>
          </view>
        </view>
      </view>
    </view> 
  </scroll-view>

scroll: function (e) {
    console.log(e.detail.scrollTop);
    var heights = this.data.listsHeight;
    var tempValue, tempId;
    for (var i in heights) {
      if (e.detail.scrollTop >= heights[i].height){
        tempValue = heights[i].value;
        tempId = heights[i].id;
      }
    }
    this.setData({
      curIndex: tempId,
      toViewLeft: tempValue
    });
  }

完整代碼請移步github:
xcx-mall

此項目還包括了購物車模塊，實現不久可能有不少須要改善。

以上即是該效果的實現方法，因爲目前小程序不能動態獲取DOM的高度。只想到這樣的實現方法，若是有更好的方法，但願能分享。謝謝。