小程序-tab下划线跟随效果

下划线效果.gif

前言

目前主要写小程序页面的ui效果，写这个页面比较千篇一律，感觉有点无聊的，然后看到有个tab，就想为它加个过渡效果的动画，就像上面的gif效果图。虽然设计师没要求的，但试试也不妨的。说干就干～

思路

现在css进化了，会打扮自己，还能美美哒。所以上面的效果，应该能只用css来实现的。上面的难点是，点击右边的时候，下划线是如何从左到右延伸的过渡；点击左边的时候，下划线是如何从右到左延伸的过渡。然后参考下面的网站，主要的就是用到～和left，width合用的过渡效果。没想到“～”作用大

https://www.cnblogs.com/coco1s/p/8657192.html

wxml文件：

<view class="tab-box">
    <block wx:for="{{tabList}}" wx:key="{{index}}">
        <view class="item {{index==currentIndex ? 'active' : ''}}" @tap="tabBtn({{index}})">
            {{item}}
        </view>
    </block>
</view>

less文件：

.tab-box{
    width: 630rpx;
    margin: 20rpx auto;
    box-shadow: @boxShadow;
    border-radius: @borRadius;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: @white;
    padding: 0 32rpx;
    .item{
        width: 106rpx;
        padding: 31rpx 0;
        color: #333;
        font-size: 34rpx;
        text-align: center;
        position: relative;
    }
    .item:before{//下划线的样式
        content: '';
        position: absolute;
        width: 0;
        bottom: 0;
        left: 100%;//这个是重点，默认从右到左延伸的效果
        height: 6rpx;
        transition: 0.2s all linear;//all表示包括left和width的过渡动画
        background: @blue;
    }
    .active{
        color: @blue;
    }
    .active:before{
        width: 100%;
        left: 0;
    }
    .active ~ .item:before{//重点
        left: 0;
    }
}

js文件

<script>
import wepy from 'wepy';

export default class activityMan extends wepy.page{
    data={
        tabList:['全部','未开始','进行中','已结束'],
        currentIndex:0,
    }

    methods={
        //选项栏的点击事件
        tabBtn(index){
            this.currentIndex=index;
        },
    }
}

</script>