类似taro-ui tab切换的导航动画

最新推荐文章于 2025-07-07 09:42:02 发布

原创最新推荐文章于 2025-07-07 09:42:02 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#taro

前端同时被 2 个专栏收录

22 篇文章

订阅专栏

react

9 篇文章

订阅专栏

本文介绍了一种基于Taro框架的商品列表页面中Tab切换动画的实现方式，通过使用Taro UI组件库，展示了如何创建带有动画效果的导航栏，并在不同商品排序选项间平滑切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类似这个切换的动画
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;
	     	 }
	      }
    }
  }