微信小程序实现滴滴导航标签切换效果

本文实例为大家分享了微信小程序实现标签切换效果的具体代码，供大家参考，具体内容如下

效果图如下： (请自动忽视底部标签.)

简单介绍一下：顶部导航使用滚动视图组件中间的内容部分使用捣蛋鬼组件

实现的逻辑就是：先这样在这样，这样然后那样。(此处省略200个字)。

代码如下，复制可用

页面结构

view class='contain '！-导航栏-scroll-view class=' tab ' scroll-x scroll-left=' { { tab scroll } } ' scroll-with-animation=' true ' block wx : for=' { { MenuList } } ' wx : key=' index ' view class=' tab-item { { current tab==index ' ' active ' : ' ' } ' data-current=' { { index } } ' bind tap=' click menu ' { item。name } }/view/block/scroll-view！-页面-swiper class=' content ' style=' height : { { height } } px ' duration=' 1000 ' current=' { { current tab } } ' bind change=' change content ' swiper-item class=' content-item ' wx : for=' { { menuList } } ' wx : key=' index '这里是{ { item。name } }/swiper-item/swiper/view js

页面({ data : { Menulist :[{ name : })快车}，{ name: '顺风车}，{ name: '外卖}，{ name: '单车}，{ name: '礼橙专车}，{ name: '出租车}，{ name: '公交}，{ name: '代驾}，{ name: '豪华车}，{ name: '自驾租车}，{ name: '拼车}，{ name: '二手车}]，tabScroll: 0，currentTab: 0，windowHeight: ' '，windowWidth: '' }，onload : function(){ wx。getsystem info({//获取当前设备的宽高，文档有成功：(RES)={ this。setdata({ window height : RES . window height，window width : RES . window width }) }，})}，onReady:函数(){ wx.setNavigationBarTitle({ //修改标题文字title: '' })，单击Menu:函数(e){ var current=e .当前目标。数据集。当前/获取当前标签的index var tabWidth=this。数据。窗宽/5/导航标签共5个，获取一个的宽度这个。setdata({ tab scroll :(current-2)* tab width//使点击的标签始终在居中位置})if(this。数据。current tab==current){ return false } else { this。setdata({当前选项卡： current })}，changeContent:函数{ var current=e . detail。当前/获取当前内容所在指数，文档有var tabWidth=this。数据。窗宽/5这个。setdata({ current ttab : current，tabscrill :(current-2)* tabWidth })} })CSS。包含{宽度： 100%；高度： 100%;}.制表符{宽度： 100%；高度： 100 rpx位置：固定；top : 0；左： 0；z指数： 100；空白： nowrap盒子尺寸：边框盒子；飞越：隐藏；线高： 100 rpx}.tab-item { display : inline-block；宽度： 20%;文本对齐：中心；font-size : 14pxcolor: # 8f9193}。活动{ color: #ff502c} .内容{填充-top : 100 rpx；盒子尺寸：边框盒子；文本对齐：中心；font-size : 14px}.内容项目{溢出-y:滚动}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。