微信小程序：菜单滑动

先演示一下效果如下：

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;
}

    
      {{item.header}}
      
        
          
            
          
          
            {{item.title}}
            {{item.intro}}
            {{item.cost}}积分 
          
        
      
     
  

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的高度。只想到这样的实现方法，如果有更好的方法，希望能分享。谢谢。