点餐界面两个ListView联动效果

onGetElement = (contentViewClass,contentkindClass,sildViewClass,sildkindClass,id) =>{
    //contentViewClass 内容视口的类名  contentkindClass 内容里面每个类的的类名   sildViewClass  title的视口类名  sildkindClass title每个类的类名  id 要选中的titlE改变状态的 id
    //
    //
    //思路：1.先获取内容里面每个类的内容高度，把每个类的内容对应的titleid 还有距离视口的最小距离和最大距离写个对象并push进 scollArry数组中
    //2.获取每个title内容距离title 视口的最小距离和最大距离写个对象，然后push到sildScoll数组中
    //3.监听内容视口的滚动距离，每次滚动就去循环scollArry 数组 去判断滚动的距离大小落在哪个内容区间内，就把对应元素内的titleid 改变状态
    //内容滚动 title 滚动  获取title 视口的高度 取得title 可滚动的最大值 定义两个参数 sildMin（大小等于视口的一半） 和 sildMax （等于最大滚动距离-视口的一半） 当内容块滚动的时候，判断 选中的title 对应在sildScoll 数组中的对象区间，然后设置title视口的滚动高度为 title 对象区间最小值（sildScoll[i].min）- sildMin
    // 还要判断当区间最小值小于等于sildMin 设置视口的滚动距离为0
    // 当选中的title 最大值 大于 sildMax  设置 title 滚动距离为title 可滚动最大高度
    /**
      *
      *
      *有需要自己改编，大部分用原生方法编写小部分使用es6或者可以留言讨论
      * 
      */
    var Element = document.getElementsByClassName(contentViewClass),
        foodtypeListH = document.getElementsByClassName(contentkindClass)[0],
        sildElement = document.getElementsByClassName(sildViewClass),
        sideListH = document.getElementsByClassName(sildkindClass)[0],
        scollArry = [],
        sildMin = sideListH.offsetHeight / 2,
        sildMax = sideListH.scrollHeight - sideListH.offsetHeight /2,
        sildScoll = [];
    //获取菜品高度
    for (var i = 0; i < Element.length; i++) {
      if(i == 0){
        scollArry.push({
          min: 0,
          max: Element[i].offsetHeight,
          id:Element[i].getAttribute(id)
        })
      }else{
        scollArry.push({
          min: scollArry[i-1].max,
          max: scollArry[i-1].max + Element[i].offsetHeight,
          id:Element[i].getAttribute(id)
        })
      }
    };
    //获取小类高度
    for (var i = 0; i < sildElement.length; i++) {
       if(i == 0){
          sildScoll.push({
            min: 0,
            max: sildElement[i].offsetHeight,
          })
        }else{
          sildScoll.push({
            min: sildScoll[i-1].max,
            max: sildScoll[i-1].max + sildElement[i].offsetHeight,
          })
        }
    };


    //监听滚动
    foodtypeListH.onscroll = (function(){
      var num  = scollArry[0].min;


      for (var i = 0; i < scollArry.length; i++) {
        if(scollArry[i].min <= foodtypeListH.scrollTop && foodtypeListH.scrollTop < scollArry[i].max){
          num = scollArry[i].id
          if(sildScoll[i].min > sildMin && sildScoll[i].max < sildMax){
            sideListH.scrollTop = sildScoll[i].min - sildMin;
          }
          if(sildScoll[i].min < sildMin) {
            sideListH.scrollTop = 0;
          }
          if(sildScoll[i].max > sildMax ){
             sideListH.scrollTop = sideListH.scrollHeight
          }
        }
      };


      this.props.tabChange(num);//这个是调取action 来改变store 上选中title 的值
    }).bind(this)

  }

//可查看效果链接，使用微信访问进行进入点餐界面查看效果：http://sz.canxingjian.com/wxdc/wxdd/production/index.html?appid=42458671&brandid=40&storeid=5&dishtype=2&table=-1