微信小程序实现tab切换

微信小程序使用的是类似MVVM类型的框架，本质是数据驱动视图，换句话来说就是逻辑层（javascript）去驱动界面层（view）的改变，功能实现核心主要在于 *** 作数据。

下面来详细讲解，微信小程序如何实现tab切换功能，如下图所示：

在wxml文件里面，搭建结构。其中，tab盒子是tab整体，btns里面的view是切换按钮，cons里面的view是切换的盒子内容。

把切换按钮btns和携雀内容cons渲染出来。在js文件里面书写数据，并且在wxml文件里面通过wx:for进行列表渲染输出。

通过d性布局去书写样式。添加cur当前类名去控制当前按钮的样式和当前显示的内容盒子。

注意微信小程序使用的是rpx可以自适应辩猛早的单位，规定所有屏幕宽度为750rpx，在iPhone6设备屏幕宽度换算是2rpx=1px。

逻辑层添加了active数据控制当前显示盒子。

wxml要书写判断验证去控制盒子是否有cur类知游名。

上面表达式表示，如果当前项的索引值index等于数据active，则此项有cur这个类名，否则就没有。注意cur类名是控制当前按钮样式和当前显示内容盒子的。

有cur这个类名的按钮会显示当前的样式，有cur这个类名的内容盒子是显示的，但是否有这个类名是通过active这个数据决定的。所以最后我们只需要把active这个数据的值修改成用户点击按钮的索引值即可实现tab切换功能。

首先要给按钮btn自定义索引值等于循环当前项的index，微信小程序给组件自定义索引值是通过在组件身上添加data-index=”{{index}}”属性，然后在js里面即可通过事件对象里面的e.currentTarget.dataset.index属性获取用户点击按钮的索引值。

给按钮自定义索引值和绑定事件，绑定点击事件通过给按钮组件添加属性bindtap=“函数名”，此处设置函数名为toggle。

把active的值设置为用户点击按钮的索引值，即可实现tab切换功能。

e.currentTarget.dataset.index获取用户点击按钮的索引值，微信小程序通过this.setData()去修改data里面的数据内容。

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

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

}

},

app.json 直接配置:

官方文档： 自定义 tabBar

custom-tab-bar/index

在小程序根目录下新建 custom-tab-bar 文猛州件夹，文件夹下建立相应的组件。

wxml 文件：

推荐使用 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。不过现在使用 view 也可以，之前是因为使用 map 组件可能会导致无法覆盖，现在 map 组件已经支持同层渲染，所以使用 view 也是没问题的。

js 文件：

tabbar 的配置主要在这里。

因为每个 tab 页下的自定义 tabBar 组件实例是不同的，在跳转新的tab 后，是一个新的 tabbar 实例，先前那个已经被销毁了，所以要重新设置。

在每个自定义的 tab 页面 onShow 方法中，

可见使用系统提供自定义 tabbar 方式不好的地方在于每个 tabbar 页面都要手动设置一遍选中状态。

为什么说是系统自定义的？

因为我们自定义的组件 custom-tab-bar/index 并没有在每个枝迹蔽页面的 json 中进行单独配置进行组件的引用，都是系统默认配置好的。

官方文档 Tabbar 。

通过 useExtendedLib 扩展库 的方式引入 weui 组件库。

app.json 配置：

在 tab 页面的 page.json 中引入 tabbar 组件即州斗可：

wxml 使用：

直接将第二种方式 使用系统自定义的方式 custom-tab-bar/index 文件夹及文件移动到 components 自定义组件文件夹中 ，并将 app.json 中的 tabbar 配置删除即可。

在相应的 tab 页面引入自定义 tabbar 组件即可。

屏幕有效区域高度 windowsHeight，需要手动维护，系统不再维护。使用系统的 tabbar，屏幕的有效区域高度 windowsHeight = 屏幕高-状态栏高度-导航条高度-tabbar高度 ；而自定义的 tabbar 则没有计算 tabbar 高度，即 windowsHeight = 屏幕高-状态栏高度-导航条高度 。

---