uniapp实现tab切换可以滚动的效果

实现效果

当 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”。

实例代码

	
		
			
				{{ list.label }}
			
		
	



	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)
			}
		}
	}


	::-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%;
	}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 小白，尝试用while，for ，if语句表示1到100相加的和。

#include int main() { int a = 1; int sum = 0; while (a #include int main() { int a = 0; int sum = 0; { for (a = 1; a # include int…