类似这个切换的动画
https://taro-ui.jd.com/#/docs/tabs
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.scss'
export default class repairmanList extends Component {
config = {
navigationBarTitleText: '商品列表'
}
constructor() {
super(...arguments)
this.state = {
currentIndex: 0,
navList: [{
id: 1,
title: '综合排序',
}, {
id: 2,
title: '距离近',
}, {
id: 3,
title: '销量',
}, {
id: 4,
title: '价格排序',
}]
}
}
changeNavState(v) {
this.setState(() => {
return {
currentIndex: v
};
});
}
render() {
return (
<View className='repairman-list__container'>
<View className='nav-title'>
{
navList.map((item, index) => (
<View className='nav-title__item'
onClick={this.changeNavState.bind(this, index)}
key={item.title}
>
<View className={['txt', index === this.state.currentIndex ? "txt_active" : null]}>{item.title}</View>
<View className={`border ${index === this.state.currentIndex ? "border_active" : null}`}></View>
</View>
))
}
</View>
</View>
)
}
}
.nav-title {
height: 84px;
display: flex;
justify-content: space-around;
background: white;
border-bottom: 1px solid #aaaaaa;
position: fixed;
z-index: 1;
width: 100vw;
top: 0;
&__item {
width: 112px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: color 0.2s;
.txt {
font-size: 28px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(153, 153, 153, 1);
transition: color 0.2s;
&_active {
color: rgba(3, 118, 232, 1);
}
}
.border {
position: absolute;
bottom: 0;
width: 0px;
height: 2px;
background: white;
border-radius: 1px;
transition: width 0.2s;
&_active {
background: rgba(3, 118, 232, 1);
width: 112px;
}
}
}
}