原生微信小程序，navigate（导航栏）tab栏，tab栏与swiper结合，含过渡动画，初级

缺乏、安全感 2022-12-05 12:10 422阅读 0赞

## 原生微信小程序，navigate（导航栏）tab栏，tab栏与swiper结合，含过渡动画，初级 ##

**看一下演示效果**

![在这里插入图片描述][20200910174226586.gif_pic_center]

**之前也做过一个类似的，tab(navigator) 栏，但是 tab 标签下面的小横线没有过渡效果，看起来会很生硬，而且不是和 swiper 联动，总体效果不尽人意，这是一个改进版**

**之前的 tab 栏切换效果演示，用来做学习的话还是很不错的，感兴趣的可以点这里跳转->[旧版（学习版）地址][Link 1]**

![在这里插入图片描述][20200910111416503.gif_pic_center]  
**看一下代码吧，实现起来比较简单，也比较初级**  
**.wxml**

<view class="tit_box">
    	<view class='navbar' id="navbar">
    		
    		
    		<block wx:for="{ {tabs}}" wx:key="*this">
    			<view class="navbar-item" data-index='{ {item.id}}' bindtap='onTabClick'>
    				<view class="navbar-title { {item.isActive?'active':''}}">{
       {item.name}}</view>
    			</view>
    		</block>
    		
    		<view class="navbar-slider" style="left: { { sliderLeft}}px; width:50px; transition: all .5s;);" />
    	</view>
    </view>
    
    <swiper current="{ {swiperCurrent}}" circular bindchange='swiperChange'>
    	<swiper-item wx:for="{ {tabs}}" wx:key="*this">
    		<view class="content">{
       {item.name}}</view>
    	</swiper-item>
    </swiper>

**.wxss（ 这次没用less，感兴趣的同学可以自己改一下，样式啥的基本没啥特别难的 ）**

.tit_box { 
        display: flex;
    }
    
    .navbar { 
        display: flex;
        position: relative;
        flex: 1;
        z-index: 500;
        top: 0;
        width: 100%;
        background-color: #ececec;
    }
    
    .navbar .navbar-item { 
        position: relative;
        display: block;
        flex: 1;
        padding: 13px 0;
        text-align: center;
        font-size: 0;
    }
    
    
    .navbar .navbar-title { 
        display: inline-block;
        font-size: 15px;
        width: auto;
    }
    
    .active { 
        color: #118ef5;
    }
    
    .navbar .navbar-slider { 
        position: absolute;
        content: " ";
        left: 0;
        bottom: 0;
        width: 100rpx;
        height: 5rpx;
        background-color: #118ef5;
    }
    
    .content { 
        background-color: rgb(0, 255, 85);
        height: 100%;
        text-align: center;
    }

**.js**

**代码gitee地址：https://gitee.com/chenminghuisir/wechat-applet-component  
[也可以点击这里直接跳转][Link 2]  
代码保存在仓库，PrincessConnect文件里**

[20200910174226586.gif_pic_center]: /images/20221123/cb50fe71134a43188511ee6df9abf6d9.png
[Link 1]: https://blog.csdn.net/qq_40893035/article/details/108318625
[20200910111416503.gif_pic_center]: /images/20221123/f70364aa10f6436cae99d8d9a5a7d275.png
[Link 2]: https://gitee.com/chenminghuisir/wechat-applet-component