在实际案例的操作过程中，我们可能会遇到“小程序怎么样用tab进行内容切换实现联动呢”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起了解看看吧。

目录

• 前言
• 如何实现页面tab
• 1.使用内置组件scroll-view
• 2.实现点击时出现的背景样式
• 3.scroll-into-view

前言

本次主要内容是介绍页面tab的开发，如何实现tab与页面内容联动呢？关注我就知道！

本次效果展示

如何实现页面tab

1.使用内置组件scroll-view

如下图所示，我们需要使用到红色框框中的属性，此属性可也实现滚动

这里有一个大坑，不管是使用scroll-x还是scroll-y遍历数据都是出现在左边一数列（这里我们只关注scroll-x、scroll-y）

<scroll-view scroll-x="true" class='scroll-view-t' :scroll-into-view="scrollinto">
<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index" 
		:class="currentIndex==index?'active':''" @click="changeTab(index)">
	{{item}}
</view>
</scroll-view>
<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'">
	<view v-for="(item,index) in 100 " :key='index'>
		{{item}}
	</view>
</scroll-view>

我们只能通过样式来改变它，让它横过来

    .scroll-view-t view {
		display: inline-block;
		font-size: 32rpx !important;
		margin: 0 15rpx;
	}
	.scroll-view-t {
		white-space: nowrap;
		height: 88rpx;
		line-height: 88rpx;
	}

2.实现点击时出现的背景样式

这里我们需要定义一个默认的索引currentIndex,在通过点击事件所传出去的索引进行判断，从而获得当前所点击的对象给到样式，样式我们就用三元表达式判断赋予样式，如下点击方法

changeTab(index) { //nabbar栏点击切换
				// if (this.currentIndex === index) return
				this.currentIndex = index
				// this.scrollinto = 'tab' + index
				// if (this.currentIndex < 10) {
				// 	this.scrollinto = 'tab0'
				// }
			},

如下是绑定的点击事件和三元表达式判断赋予样式，其中背景样式提前写好了

<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index" 
	:class="currentIndex==index?'active':''" @click="changeTab(index)">
	{{item}}
</view>

不过现在只实现了通过点击样式发生改变，感觉实现了tab切换，眼下要解决点击时tab这个导航条也要自己滚动起来，不能一边手动滚动，然后再点击吧

3.scroll-into-view

使用scroll-into-view，实现点击时自动滚动

使用它的目的主要是，在点解tab时可以实现，你向那个方向点，他就往那个方向滚动，不过在点回去的时候，就有坑了，需要对其作出判断

阅读文档很难理解对吧，我在这里说说我的理解，这里是想要我们通过在scroll-view中属性scroll-into-view绑定一个元素，此元素还要获得id,此id还不能已数字开头，此id就是移动的关键，需要绑定，所遍历内容的索引，从而实现往哪里滚动，不过想点回去就需要进行判断

如下代码中在scroll-view，使用scroll-into-view绑定了一个自己定义的空元素scrollinto

在v-for遍历后获得了索引，id就通过索引进行了绑定,拼接了以tab开头

<scroll-view scroll-x="true" class='scroll-view-t' :scroll-into-view="scrollinto">
			<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index" 
			:class="currentIndex==index?'active':''" @click="changeTab(index)">
				{{item}}
			</view>
</scroll-view>

实现点击滚动很简单，要滚动回去就要判断了，如下代码，只要当前的this.scrollinto = 'tab' + index就能实现点击就滚动，回去是就要判断当前点击的缩影，手动赋值，给一个最好的区间，这样效果更好

changeTab(index) { //nabbar栏点击切换
				if (this.currentIndex === index) return
				this.currentIndex = index
				this.scrollinto = 'tab' + index
				if (this.currentIndex < 10) {
					this.scrollinto = 'tab0'
				}
			},

以上就是关于小程序怎么样用tab进行内容切换实现联动呢的介绍啦，需要的朋友可以参考上述内容，希望对大家有帮助，想要了解更多，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。