【微信小程序】滚动锚点核心代码

功能说明

• 展示方式为竖向平铺
• 支持点击切换Tab，并且自动锚至对应目标
• 支持滚动切换Tab，对应锚点滚动到对应位置时自动切换tab

效果图

组件代码

• 获取关键元素的滚动高度位置信息，并存储起来，在点击对应tab的时候只需将标签绑定的scroll-top属性赋值对应锚点的高度即可达到点击tab滚动切换的效果

// 获取关键元素位置信息
const handleImageLoad = () => {
    const query = Taro.createSelectorQuery()
     query
         .select('#tabContent')
         .boundingClientRect(res => {
             content.value.headImg.top = res.top
         })
         .exec(rect => {})
     query
         .select('#formWrap')
         .boundingClientRect(res => {
             content.value.formTop = res.top
         })
         .exec(rect => {})
     content.value.tabMap.forEach(ele => {
         query
             .select(`#${ele.id}`)
             .boundingClientRect(res => {
                 ele.top = res.top - 44
             })
             .exec()
     })
     tabs.value = content.value.tabMap.filter(t => !t.tabIgnore)
 }

• 滚动切换tab的关键就是监听页面的滚动位置，在标签中可以使用@scroll="scroll"事件监听滚动位置，示例代码如下

// 监听滚动事件
const scroll = e => {
    scorllValue.value = e.currentTarget.scrollTop
}

// 监听锚点区间，激活对应tab
watch(
    () => scorllValue.value,
    newScorll => {
        if (newScorll < tabs.value[1].top - 1) {
            tabState.value = tabs.value[0].id
        }
        if (newScorll >= tabs.value[1].top + 1 && newScorll < tabs.value[2].top - 1) {
            tabState.value = tabs.value[1].id
        }
        if (newScorll >= tabs.value[2].top + 1) {
            tabState.value = tabs.value[2].id
        }
    },
)