下划线效果.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>
