微信小程序分类-左侧导航与右侧内容联动

左侧导航与右侧内容联动
一、首先是点击左侧导航，我们右侧内容需要滑动至相应的位置。

思路是：点击左侧某一项，获取该元素的id，也就是左侧view的id，然后动态传到右侧内容的scroll-into-view，scroll-into-view的值为某个子元素的id，
这里的子元素说的是右侧的view，我们将左侧view的id和右侧view的id设置为同一个值时，这样当左侧id发生变化时，scroll-into-view会帮助我们将右侧view进行相应的变化。
如图：

 

 

数据不同，data-id='a{ {item.id}}'替换成你数据的参数id（左侧栏数据的id）
二、接下来是右侧滚动，左侧对应选中，也就是高亮。

思路是：既然是滚动，我们需要用到scroll-view中的bindscroll属性（绑定滚动事件，和bindtap点击事件类似，点击触发bindtap监听，滚动触发bindscroll监听），
每次右侧滚动时，我们需要计算当前滚动的高度，当滚动超过左侧分类商品在右侧中占据的高度时，我们将动态修改左侧导航的id。
实际上当数据都显示的时候，我们计算每一项分类在右侧占据的高度，当滚动超过这个高度时，我们就修改左侧导航的id，这样我们就实现了高亮。
如图：

需要注意的是以上的红色圈部分，两个图中的红色圈id要一样
计算右侧占据高度的方法是通过wx.createSelectorQuery()。
我的数据是{ {good}}这个，每个人的数据不一样，但方法是相通的，按照我的文字和图进行操作是一定可以实现的。

三、最后一点问题  

我们在判断滚动的高度是否超出时，最好给最初的scrollTop加上10，因为如果为0，当我点击第二个分类时，滑动可能还没有超出第一个分类占据的高度，那么高亮就会发生计算错误;还有就时如果分类中后面的商品过少，滑动时高亮也没有发生变化，所以最好时在最后的一个分类上做一些处理，比如加上占据高度，如图。

源码部分
js：

data: {

winHeight: 0,

good: [],

contentActive: '', // 内容栏id

navActive: 0, // 导航栏选中id

heightArr: [],

containerH: 0,

},

onLoad: function () {

// 获取窗口可用高度

wx.getSystemInfo({

success: res => {

this.setData({

winHeight: res.windowHeight

});

}

});

// 在请求网络数据之后里面---------

this.setData({

good: res

})

this.setHeightArr();

});

// 在请求网络数据之后里面写以上-------

},

 

setHeightArr:function(){

let query = wx.createSelectorQuery().in(this);

let heightArr = [];

let s = 0;

query.selectAll('.vertical-list').boundingClientRect((react) => {

react.forEach((res) => {

s += res.height;

heightArr.push(s)

});

this.setData({

heightArr: heightArr

})

});

query.select('.content').boundingClientRect((res) => {

// 计算容器高度

this.setData({

containerH: res.height

})

}).exec();

},

 

onScroll(e) {

let scrollTop = e.detail.scrollTop;

scrollTop += 10;

let scrollArr = this.data.heightArr;

if (scrollTop >= scrollArr[scrollArr.length - 1] - this.data.containerH) {

return

} else {

for (let i = 0; i < scrollArr.length; i++) {

if (scrollTop >= 0 && scrollTop < scrollArr[0]) {

console.log('==============aaa' + scrollTop + "==" + scrollArr[0]);

this.setData({

navActive: 0

})

} else if (scrollTop >= scrollArr[i - 1] && scrollTop < scrollArr[i]) {

console.log('==============bbb' + scrollTop + "==" + scrollArr[i]);

this.setData({

navActive: i

})

}

}

}

},

 

chooseType: function(e) {

let id = e.currentTarget.dataset.id;

let index = e.currentTarget.dataset.index;

console.log('=============id' + id + "--" + index);

this.setData({

toView: id,

navActive: index

})

},

 

wxml：
<view class="book-box">

<view class="swiper-vertical-tab">

<scroll-view class='swipter-nav' scroll-y="true" style="height:{ {winHeight}}px;">

<view wx:for="{ {good}}" wx:key="item" class="{ {index===navActive ? 'active' : ''}}" bindtap="chooseType" data-id='a{ {item.id}}' data-index='{ {index}}'>

{ {item.foodType}}

</view> 

</scroll-view>

</view>

 

<view class="content content-class">

<scroll-view class="swiper-vertical-box" scroll-y="true" style="height:{ {winHeight}}px;" scroll-into-view="{ {toView}}" scroll-with-animation="true"