这里主要用到微信小程序提供的SelectorQuery获取页面节点信息实现，组件用的是微信小程序的scroll-view 逻辑就是获取右侧盒子的节点信息，获取右侧子分类的节点信息，当子分类滑动到顶部的之后，则切换左侧分类状态，而且当右侧子分类的位置处于触顶以及包含顶部位置的状态下，同样激活左侧分类状态。 view结构 左侧父级分类 { {item.catName}} 右侧子分类 { {item.name}} { {item2.name}} css的部分大家自己按照需求写即可。 js部分 data:{ // ...数据... active:'', // 左侧分类激活 activeClassifyId :'' // 滚动定位的id } // 左侧分类点击 leftClick(e){ // 当前分类id let { id } = e.currentTarget.dataset this.setData({ active:id, // 左侧激活的id activeClassifyId : id // 分类定位的id }) // activeClassifyId分类定位的id不应该和左侧激活的id是同一个，否则左侧激活会在下面的滚动事件内持续触发，导致无法滚动。 }, // 右侧滚动触发 scroll(){ let { rightData } = this.data rightData.map(item=>{ if(item.list.length>0){ // 返回一个 SelectorQuery 对象实例。获取页面的节点信息。 const query = wx.createSelectorQuery() query.select('#chunk'+item.id) // 获取id为chunkID的元素 .boundingClientRect(ref=>{ // 获取节点宽高信息和位置信息 // 如果当前的子分类滚动到了顶部以及当前子分类正处于顶部的位置 if( 0 >= ref.top && ref.top >= (ref.height*-1) ){ this.setData({active :item.id}) // 切换左侧父分类的高亮 } }).exec() } }) }, 属性解释： scroll-with-animation：在设置滚动条位置时使用动画过渡 scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 bindscroll：滚动时触发的事件event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} createSelectorQuery：返回一个 SelectorQuery 对象实例。获取页面的节点信息。 select：获取id的元素 boundingClientRect：获取节点宽高信息和位置信息 说明 此处用到的是scroll-into-view根据子分类的id动态定位到右侧子分类位置，右侧子分类在滚动的时候，会判断条件，如果当前子分类展示的这一栏触顶或者处于正在展示的位置（包含顶部），更新父级分类。 注意 左侧分类的高亮active不能和滚动定位的activeClassifyId共用，否则右侧滚动的时候会持续更新active导致右侧无法滚动，activeClassifyId只需要在左侧父级分类点击的时候更新即可。