微信小程序-解决滚动到对应试图标签也随着动

点击对应标签,滚到到对应位置

用于制作侧边导航栏，滚动到下一栏，左边title也跟着动

关键点

• scroll-view中的scroll-into-view
• 容器必须有固定高度,子容器使用id

步骤

1. 左边的侧边使用van-sidebar,使用它的activeKey,来动态将index传进函数中(不使用van-sidebar则需要使用mark:index来传递当前索引)
2. 左边通过函数和传递的对应索引来修改scroll-into-view的索引
3. 右边的scroll-view容器设置scroll-into-view，因为scroll-into-view的值时动态的，要在data中初始化为0
4. 右边的子容器中id要跟scroll-into-view格式保持一致，确保跳转时能跳转到对应子容器上
5. 示例：

   <view class="index-list-layout">
     <view class="index-list-refer"></view> // 参照物
     <scroll-view class="index-list index-list-sidebar" scroll-y> // 左边的标题栏
       <van-sidebar 
         custom-class="sidebar-class"
         active-key="{{sidebarIndex}}" 
         bind:change="onChangeSidebar"
       >
         <block wx:for="{{商品列表}}" wx:key="id">
           <van-sidebar-item>
             <view slot="title" class="van-multi-ellipsis--l2">{{item.title}}</view>
           </van-sidebar-item>
         </block>
       </van-sidebar>
     </scroll-view>
     <scroll-view  // 右边的内容商品栏
       class="index-list index-list-category" 
       scroll-y
       scroll-with-animation
       scroll-into-view="index-item-{{selectIndex}}" // 用来定位点击左边标题栏时定位右边容器，当知道selectIndex的数值，也会跳到对应item的columnIndex数值
     >
       <block 
         wx:for="{{商品列表}}" 
         wx:for-item="column" 
         wx:for-index="columnIndex" 
         wx:key="id"
       >
         <view // 被参照物
           id="index-item-{{columnIndex}}" 
           class="index-list-item" 
           data-index="{{columnIndex}}"
         >
           <view> 商品内容省略</view>
         </view>
       </block>
     </scroll-view>
   </view>

获取滚动时的节点信息

关键点

• 创建一个监听器createIntersectionObserver
• oberserveAll:true 监听所有节点
• .relativeTo(参照物)
• .observe(被参照物)

步骤

1. 当左边侧边栏布局形成时,需要有一个参照物,可以在滚动布局上创建一个空的view,样式设置高1px,相对上一个位置绝对定位,左高为0
2. 由于获取到被参照物中没有index,而我们需要index,在view中手动设置一个data-index
   • 也可以使用到van-sidebar,使用它的activeKey,来动态将index传进来,实现滚动到对应地方,标签也跟着改变(例子使用van-sidebar)
3. 左边有参照物，右边的整个商品滚动布局就作为被参照物
4. 然后监听索引列表滚动的函数通过监听参照物与被参照物是否相交将对应的索引值传到dada中
5. 该函数在商品列表渲染完成后使用nextTick调用
6. 示例

   changeIndexListScroll() {
     const intersectionObserver = this.createIntersectionObserver({
       observeAll: true,
     })
     intersectionObserver
       .relativeTo('.index-list-refer')
       .observe('.index-list-item', (e: any) => {
         const index = e.dataset.index
         const intersectionRatio = Math.ceil(e.intersectionRatio)
   
         if (intersectionRatio > 0) {
           this.setData({
             sidebarIndex: index,
           })
         }
       })
   },