用es6模板字符串的方式绑定了一个.border样式和一个动态样式.active

<View 
	className={`border ${index === this.state.currentIndex ? "active" : null}`}
>
</View>

用数组的形式

<View 
	className={['txt', index === this.state.currentIndex ? "txt-active" : null]}
>
{item.title}
</View>

然后在点击的时候调方法，改变状态值，动态样式绑定。

onClick={this.changeNavState.bind(this, index)}

changeNavState(v) {
   this.setState(() => {
      return {
        currentIndex: v
      };
    });
 }

完整代码

import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import './repairmanList.scss'



export default class repairmanList extends Component {
  config = {
    navigationBarTitleText: '师傅列表'
  }
  constructor() {
    super(...arguments)
    this.state = {
      currentIndex: 0,
      navList: [{
        title: '综合排序',
      }, {
        title: '距离近',
      }, {
        title: '销量高',
      }, {
        title: '速度快',
      },],
    }
  }

  changeNavState(v) {
    this.setState(() => {
      return {
        currentIndex: v
      };
    });
  }

  render() {
    let { navList, businessInfoItem } = this.state
    return (
      <View className='repairmanList-container'>
        <View className='nav-title'>
          {
            navList.map((item, index) => (
              <View className='item'
                onClick={this.changeNavState.bind(this, index)}
                key={item}
              >
                <View className={['txt', index === this.state.currentIndex ? "txt-active" : null]}>{item.title}</View>
                <View className={`border ${index === this.state.currentIndex ? "active" : null}`}></View>
              </View>
            ))
          }
        </View>
      </View>
    )
  }
}