分享一个我前几天做的移动端 tab滚动跟随的例子
随着滚动条的滚动，tab会对应进行切换
首先我们需要监听当前页面的滚动
mounted(){
//记录每个内容对用的dom数组
this.arrDom = document.getElementsByClassName("item-content");
window.addEventListener('scroll', this.handleScroll);
},
destroyed(){
window.removeEventListener('scroll', this.handleScroll);
},
我们的t
在Vue.js中实现“滚动tab跟随切换效果”是一种常见的移动端交互设计，它可以提供更好的用户体验，让用户更容易地在多个内容区域之间导航。以下是如何利用Vue.js实现这个功能的详细步骤：
我们需要创建一个Vue实例，并在`data`选项中定义`tabList`，这是一个包含各个tab项的对象数组。例如：
```javascript
data() {
return {
tabList: [
{ id: 1, name: '详情' },
{ id: 2, name: '评论' },
{ id: 3, name: '新闻' },
{ id: 4, name: '关于' },
{ id: 5, name: '相关' }
],
active: 1, // 初始选中的tab
headerFixed: false, // 是否固定tab头
arrDom: [], // 存储每个内容对应的DOM元素
offsetTop: 0 // 记录页面顶部到tab栏的距离
};
},
```
接下来，在模板中，我们使用`v-for`指令来渲染`tabList`，同时为每个tab项绑定点击事件`handleSelectTab`来切换选中的tab。对应的DOM结构如下：
```html
<nav :class="headerFixed ? 'tabFixed tablist' : 'tablist'" id='tab'>
<div
@click='handleSelectTab(item.id)'
:class="active == item.id ? 'tab-item tab-active' : 'tab-item'"
v-for='item in tabList'
:key='item.id'
>{{ item.name }}</div>
</nav>
<!-- 内容区 -->
<div class="item-content" v-for="(content, index) in tabList" :key="content.id">
<div>{{ content.name }}的内容</div>
</div>
```
这里我们为每个`.item-content`设置了相同的CSS类名，以便后续计算它们的位置。
为了实现滚动监听，我们在`mounted`生命周期钩子中添加一个事件监听器，监听窗口的`scroll`事件，并调用`handleScroll`方法。同时，在`destroyed`钩子中移除监听器，确保组件销毁时不会占用资源：
```javascript
mounted() {
this.arrDom = Array.from(document.getElementsByClassName("item-content"));
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
}
```
`handleScroll`方法用来处理滚动事件，获取当前滚动条的垂直位置（`scrollTop`），并根据它来更新`active`状态，使相应的tab被选中。这里我们需要检查当前内容区与上一内容区的相对位置，以确定哪个tab应处于激活状态：
```javascript
methods: {
handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.headerFixed = scrollTop > this.offsetTop;
for (let i = 0; i < this.arrDom.length - 1; i++) {
if (this.arrDom[this.arrDom.length - 1].offsetTop - scrollTop > 80) {
if (this.arrDom[i].offsetTop - scrollTop <= 80 && this.arrDom[i + 1].offsetTop - scrollTop > 80) {
this.active = i + 1;
}
} else {
this.active = this.arrDom.length;
}
}
},
handleSelectTab(id) {
this.active = id;
}
}
```
`handleScroll`方法的核心是通过比较每个`.item-content`的`offsetTop`值与当前`scrollTop`来确定哪个内容区域在视口内。当用户滚动时，如果当前内容区域的顶部距离屏幕顶部小于等于80像素，并且下一个内容区域的顶部距离屏幕顶部大于80像素，我们就将`active`设置为当前内容区对应的tab索引加1。
在CSS方面，我们可以设置`.tabFixed`类来实现tab栏的固定定位，使其在滚动时始终显示在顶部。同时，通过`active`状态来切换不同tab的选中样式。
通过以上步骤，我们就成功实现了Vue.js中的滚动tab跟随切换效果。这个功能使得用户在滚动页面时，可以清楚地看到当前所在的tab，提高了导航的便捷性和用户体验。
