小程序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 (thiscurrentIndex === index) return

thiscurrentIndex = index

// thisscrollinto = 'tab' + index

// if (thiscurrentIndex < 10) {

// thisscrollinto = '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，实现点击时自动滚动

使用它的目的主要是，在点解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>

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

changeTab(index) { //nabbar栏点击切换

if (thiscurrentIndex === index) return

thiscurrentIndex = index

thisscrollinto = 'tab' + index

if (thiscurrentIndex < 10) {

thisscrollinto = 'tab0'

}

},

微信小程序Swiper做Tab切换，带tab切换动画

小程序中我们做tab切换一般情况下可以做点击切换，但是有Swiper组件，其实我们也可以做滑动切换

监听Swiper的bindchange，我们就可以在切换时改变tab的选装状态达到切换的目的。

但是这样的方式tab的切换方式是跳转式的，体验不是很好。于是就有了这个demo，我们一步步优化切换体验。

首先：利用flex布局，做出tab区域，如果tab选项卡很多可以使用Scroll-view；一般的跳转式的tab用boder-bottom实现就好，这里我们加了一个“navbar-slider”，加上translateX动画实现平移切换。

然后：计算出每个tabItem的宽度，和每个item距离0坐标的距离；下中50是slider的宽度，对应上面“width:50px;”

关联：1、监听item点击，切换swiper；2、监听swiper切换改变slider位置和tab显示

效果展示如下：

现在我们已经实现了，Swiper和tab的带动画联动，但是我们可以发现，我们的切换动画是在切换之后进行的，我们这里还可以继续优化。

swiper在切换时可以监听bindtransition，swiper-item 的位置发生改变时会触发 transition 事件，eventdetail = {dx: dx, dy: dy}，dx则是平移的偏移量，我们可以通过这个监听来实时设置slider的位置。

切换后校正slider的位置，这里我们不能使用bindchange来校正，因为bindchange在切换时手指释放的时候就调用了，我们这里使用bindanimationfinish回调来校正（动画结束时会触发 animationfinish 事件，eventdetail 同上）

最终：展示如下

在小程序开发文档中明确说明了最好不要频繁调用setData，我们最后这种方式就会频繁的调用，所以这里其实只是提供这种思路，但是工程中并不建议这么使用

小程序开发者文档

SwiperTab

小程序PICKER联动中的文字太长显示不全的教程步骤：

1，新建字幕 pr中点击“文件——新建——旧版标题”，就可以打开新建字幕窗口。2，设置名称 设置字幕的名称，点击确定。3，点击滚动设置图标 设置好字幕内容之后，点击滚动设置图标（带有上下两个箭头符号的图标）。4，选择滚动选项 字幕类型选择为“滚动”，点击确定即可。

以上就是关于小程序tab选项卡切换样式全部的内容，包括:小程序tab选项卡切换样式、小程序Swiper做Tab切换，带tab切换动画、小程序PICKER联动中的文字太长显示不全等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！