实现效果
当 tab 切换的内容很多时，需要用到滚动，希望在点击 tab 的时候可以自动滑动到对应的tab下
知识点
scrollIntoView：该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
语法
element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布尔参数
element.scrollIntoView（scrollIntoViewOptions）; //对象参数
语法参数
alignToTop [可选]，目前之前这个参数得到了良好的支持
true 元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: “start”, inline: “nearest”}。这是默认值
false 元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: “end”, inline: “nearest”}。
scrollIntoViewOptions [可选]，目前这个参数浏览器对它的支持并不好，可以查看下文兼容性详情
behavior [可选]定义过渡动画。“auto”,“instant"或"smooth”。默认为"auto"。
block [可选] “start”，“center”，“end"或"nearest”。默认为"center"。
inline [可选] “start”，“center”，“end"或"nearest”。默认为"nearest"。
实例代码
<template>
<view class="detail_tab_content" v-if="navList.length > 0">
<view class="navBlack">
<view v-for="(list,index) in navList" :key="index"
:class="[current === list.code?'tab_active':'', 'tabItem']" @tap="detailTabChange(list.code, index)">
{{ list.label }}
</view>
</view>
</view>
</template>
<script>
import openDetailPage from '@/utils/bridge.js'
// import { getBanner } from '@/api/sales/sales'
import nav from '@/utils/huiyan.nav.js';
export default {
props: {
active: {
type: String,
default: ''
}
},
data() {
return {
navList: [{
code: 'jxcpage',
label: '市场'
},
{
code: 'jxcpage1',
label: '市场1'
},
{
code: 'jxcpage2',
label: '市场2'
},
{
code: 'jxcpage3',
label: '市场3'
},
{
code: 'jxcpage4',
label: '市场4'
},
{
code: 'jxcpage5',
label: '市场5'
},
{
code: 'jxcpage6',
label: '市场6'
}
],
current: 'jxcpage',
oldIndex: -1
}
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
initNav() {
// 跳转至对应tab项
this.$nextTick(() => {
let element = document.querySelector('.tab_active')
element && element.scrollIntoView()
})
},
detailTabChange(code, index) {
// console.log('pppppp', page)
this.current = code
this.$emit('changeTopNav', code)
setTimeout(() => {
const activeNode = document.querySelector('.tab_active')
let element = index >= this.oldIndex ? activeNode.nextElementSibling : activeNode
.previousElementSibling
element && element.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center"
})
this.oldIndex = index
}, 0)
}
}
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
display: none;
}
.detail_tab_content {
height: 80rpx;
display: flex;
flex-direction: column;
// justify-content: center;
position: relative;
top: 0;
left: 0;
overflow-x: scroll;
z-index: 1000;
color: #fff;
}
.nav,
.navBlack {
display: flex;
justify-content: flex-start;
font-size: 28rpx;
color: #fff;
// height: 88rpx;
align-items: center;
padding: 0 16rpx;
width: 100%;
box-sizing: border-box;
position: fixed;
left: 0;
top: 0;
overflow-x: auto;
// margin-bottom: 16rpx;
.tabItem {
display: flex;
align-items: center;
justify-content: center;
height: 88rpx;
width: 20%;
flex-shrink: 0;
}
.tab_active {
color: #F12F38;
position: relative;
width: 20%;
flex-shrink: 0;
&::after {
content: '';
display: inline-block;
width: 48rpx;
height: 8rpx;
background: #F53F3F;
border-radius: 4rpx;
position: absolute;
bottom: 0rpx;
z-index: 998;
left: 50%;
margin-left: -24rpx;
}
}
}
.navBlack {
.tab_active {
color: #F12F38;
}
}
.fiexd_bg {
height: 88rpx;
width: 100%;
}
</style>
