小程序菜单左右联动效果

小程序菜单左右联动

小程序菜单左右联动，一个看起来很有趣并用途普遍的功能，没做这个功能之前，我翻阅了好多的网上文章，但是实现起来却都多少有些复杂（主要是不懂啥意思），直到遇到高人指点，用简单的逻辑，实现了这个功能，下面就是见证奇迹的时刻：
每个人的需求肯定是不一样的，理解为主。
wxml需要做的：
1.首先要在右侧菜单的上面插入scroll-view 这个标签，这个标签官方做出了解释。
2.同时左侧菜单的上面也要插入scroll-view 这个标签。
3.如想要滑动效果，可以再里面加入scroll-with-animation='true’属性即可。
4.右侧菜单因为也要做联动所以需要再里面加入bindscrol事件。
（这个是事件只要滚动就会一直兼听）

下面来看代码：

wxml:

 <!-- 菜单区域 -->
  <view class="_flex box">
    <!-- 左侧菜单 -->
    <scroll-view scroll-y class='categorys' scroll-y scroll-with-animation='true' scroll-into-view="{{views}}">
      <view wx:for="{{categorys}}" wx:key="category" class="list-menu-item {{item.id == curCategory ?'list-left-menu-box-selected':'list-left-menu-box-unselect'}}" data-id="{{item.id}}" bindtap='selectCategory'>
        {{item.name}}
      </view>
    </scroll-view>

    <!-- 右侧菜单 -->
    <scroll-view class='list _flex-1 box' scroll-y scroll-with-animation='true' scroll-into-view="{{curListView}}"
     bindscroll="scrollcontent">

      <view class="list-category box" wx:for="{{categorys}}" wx:key="list" wx:for-item="category" id="list{{category.id}}">
        <view class="cname">{{category.name}}</view>
        <view class="list-category box" wx:for="{{category.children}}" wx:key="item" wx:for-item="dish" data-id="{{dish.id}}" id="item{{dish.id}}" bindtap="selectItem" data-statu="open">

          <view class="detail _flex box">

            <view class="thumb box" style="background-image:url({{dish.thumb == ''||dish.thumb == null?thumbs:dish.thumb}})"></view>
            <view class="info box _flex-1">
              <view class="dishName ">{{dish.name}}</view>
              <view class='author '>{{dish.en }}</view>
              <view class='price '>¥ {{dish.price}}
                <label class="vip" wx:if="{{dish.vip && (dish.vip < dish.price) }}">会员 ¥ {{dish.vip}}</label>
              </view>
              <view class="add _flex">
                <view class='itemNum _flex-1'>{{util.checkFromCart(dish.id,cart)}}</view>
                <view class='itemAdd' data-statu="open"  id="item{{dish.id}}"  data-id="{{dish.id}}" catchtap='itemadd'>+</view>
              </view>
            </view>
          </view>

        </view>
      </view>
    </scroll-view>

  </view>

js:

//左侧点击菜单，右侧菜品，自动滚动相应区域
   selectCategory: function(event) {
      var id = event.currentTarget.dataset.id; 			//通过event取到当前所点击的分类菜单的id
      this.setData({ //通过数据绑定，直接将ID塞到 scroll-into-view  对应的值里
         curListView: "list" + id,   //右侧菜单scroll-into-view  对应的值
         curCategory: id,  //左侧菜单scroll-into-view  对应的值
      })
   },

//右侧菜单滚动，左侧选中当前所属分类
  scrollcontent: function (e) {
      var scrollHeight = e.detail.scrollTop   //同样通过e获取右侧菜单，滚动到顶部，隐藏部分的高度
      var categorys = this.data.categorys	//这是一个数组，包含所有菜类和该分类下菜品
      var sumHeight = 0;							//自定一个一个变量，用来存每个菜类和菜品一共的高度
      for (var index in categorys) {  			//循环所有菜类和菜品
         var type = categorys[index];			//菜类
         var dishSize = type.children.length;//每个菜类下的所有菜品
         //用定义的变量 加等于 每个菜类标题的高度（15）+ 每个菜类下的所有菜品的数量（dishSize ）乘以 每个菜品的高度（100）
         //就是当前菜类下菜品以及标题的累计高度
         //（这里的15 和100代表的是像素（px））
         sumHeight += 15 + dishSize * 100;
         if (scrollHeight <= sumHeight) {//判断当前滚动到顶部隐藏部分的高度，如果小于等于右侧菜单所有菜类和菜品的一共高度
      		//那就把当前高度的 菜品属于所在类型的id传给左侧菜单的scroll-into-view 对应值里
            this.setData({
               curCategory: type.id,
            })
            break;    			//跳出当前循环
         }
      }
 },

附上源码链接：https://download.csdn.net/download/weixin_39162041/12269630