小程序view-scroll组件实现左右列表联动

实现效果类似：

1.左边点击 -> 右边滚动的相应的分类 

2.右边滑动 -> 左边的样式跟着改变

思路：总共有两个view-scroll  元素，一个左边一个右边。左边点击右边滚动和右边手动滑动都是由右边的bindscroll="handleContentScroll" 来控制，其中左边点击控制需要在右边加上scroll-top="{{contentScrollTop}}"，在左边点击的时候计算右边需要滚动的高度以达到让右边自动滚动的效果

 

注意：view-scroll要滑动的前提是高度要固定

具体代码：

左边：在分类上加个bindtap事件

wxml：

<view class='goods_left'>
      <scroll-view scroll-y scroll-with-animation="true" >
        <block wx:for='{{ goodsInfo }}' wx:key='index'>
          <view class='left_list {{index === activeTab ? "on" : ""}}' catchtap='changeMenu' data-index='{{ index }}'>
            <text class='list_text'>{{ item.name }}</text>
            <text class='list_num' wx:if='{{ item.typeCount > 0}}'>{{ item.typeCount }}</text>
          </view>
        </block>
      </scroll-view>
    </view>

js：其中cateHeightArr这个变量是右边每个分类对应高度的数组

 // 点击左侧
  changeMenu(e){
    const { index } = e.currentTarget.dataset
    const { cateHeightArr } = this.data
    this.data.menuClick = true
    var contentScrollTop = cateHeightArr[index - 1] || 0;
    this.setData({
      activeTab:index,
      contentScrollTop:contentScrollTop,
      scrollChange: index == 0 ? false : true
    })
  },

 

右边：

wxml： throttle="{{false}}"这个要加上，可以解决scrollTop在滑动到顶的时候，值不为0的问题

<view class='goods_right'>
      <scroll-view  
      scroll-y 
      throttle="{{false}}"
      scroll-with-animation="true"  
      scroll-top="{{contentScrollTop}}"
      bindscroll="handleContentScroll" >
        <block wx:for='{{ goodsInfo }}' wx:key='gid'>
          <view class='right_item' >
                     
                </view>
            </block>
          </view>
        </block>
        </scroll-view>
    </view>

js：

scrollTop：这个值我做了个10以内就改变scrollChange的做法

scrollChange：这个参数是因为我有个搜索置顶的效果，当置顶的时候，搜索上面的内容display：none否则为block。其中列表的高度一直是flex:1。（ps：本来想用当页面滑动置顶时，设置列表高度,这样搜索上面的内容也不用隐藏，但是这样在置顶时不能连贯的接上下面的列表滑动 。要把手拿起来重新滑动一下，会有卡顿感。所以采用了这种方式。）

menuClick：这个参数是用来判断，当用户点击左边且右边该分类内容太短无法滚动时，解决左侧activeTab会返回到该分类之上的选项，达到左侧只要点击样式就改变，右侧内容不够也不改变

// 右侧滚动监听
  handleContentScroll(e){
    const { scrollTop } = e.detail;
    const { scrollChange ,cateHeightArr ,activeTab ,menuClick} = this.data
    console.log(scrollTop)
    if(scrollTop > 10 && !scrollChange) {
        this.setData({
          scrollChange:true
        })
    }else if(scrollTop <= 10 && scrollChange){
        this.setData({
          scrollChange:false
        })
    }
    
    if(!menuClick){
      let index = cateHeightArr.findIndex(item => item > scrollTop);
      if(index != activeTab){
        this.setData({ 
          activeTab: index, 
        })
      }
    }
    this.data.menuClick = false;
  },