功能说明
- 展示方式为竖向平铺
- 支持点击切换Tab,并且自动锚至对应目标
- 支持滚动切换Tab,对应锚点滚动到对应位置时自动切换tab
效果图
![效果图](https://i-blog.csdnimg.cn/blog_migrate/169648eb7d25df0d8222a652a4779a9c.png)
组件代码
- 获取关键元素的滚动高度位置信息,并存储起来,在点击对应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
}
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
}
},
)