微信小程序：菜单滑动

先演示一下效果以下：

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的高度。只想到这样的实现方法，若是有更好的方法，但愿能分享。谢谢。