微信小程序实现tab切换

微信小程序实现tab切换,第1张

微信小程序使用的是类似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'

}

},

微信小程序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 事件,event.detail = {dx: dx, dy: dy},dx则是平移的偏移量,我们可以通过这个监听来实时设置slider的位置。

切换后校正slider的位置,这喊派里我们不能使用bindchange来校正,因为bindchange在切换时手指释放的时候就调用了,我们这里使用bindanimationfinish回调来校正(动画结束时会触发 animationfinish 事件,event.detail 同上)

最终:展示如下

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

小程序开发者文档

SwiperTab


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12562937.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-26
下一篇 2023-05-26

发表评论

登录后才能评论

评论列表(0条)

保存