trao+react导航栏和轮播图的使用

import { Component } from "react"
import {View,Swiper,SwiperItem} from '@tarojs/components'
import './index.scss'

export default class Order extends Component{
  constructor(props){
    super(props)
    this.state = {
      menus:[
        { id:0, value:'全部' },
        { id:1, value:'使用中' },
        {
          id:2,
          value:'已过期'
        },
        {
          id:3,
          value:'已结束'
        }
      ],
      active:0
    }
  }
  checkTab = (id) =>{
    this.setState({ active:id })
  }
  changeTab = (e)=>{
    this.setState({
      active:e.detail.current
    })
  }
    render(){
      const { menus,active } = this.state
        return(
            <View className="order">
              <View className="order-menu">
              {
                menus.map((item)=>{
                 return (
                   <View
                     className={`order-menu-item ${active ===item.id? 'active-border':''}`}
                     key={item.id}
                     onClick={this.checkTab.bind(this,item.id)}
                   >
                     {item.value}
                   </View>
                 )
                })
              }
              </View>
              <Swiper
                className='test-h'
                current={active}
                onChange={this.changeTab}
                >
                <SwiperItem>
                  <View className='demo-text-1'>1</View>
                </SwiperItem>
                <SwiperItem>
                  <View className='demo-text-2'>2</View>
                </SwiperItem>
                <SwiperItem>
                  <View className='demo-text-3'>3</View>
                </SwiperItem>
                <SwiperItem>
                  <View className='demo-text-4'>4</View>
                </SwiperItem>
              </Swiper>
            </View>
        )
    }
}