taro tab和swiper联动

tab页和swiper联动比较简单直接贴代码了

# index/index.jsx
import React, { Component } from 'react'
import { View, Swiper, SwiperItem, Image } from '@tarojs/components';
import './index.scss'
import { AtIcon, AtButton } from 'taro-ui';

const navList = ["全部", "待消费", "待评价", "退款", "其他订单"];


class OrderList extends Component {
    state = {
        current: 0,
    }
    Actived=(i)=> {
        this.setState({
            current: i
        })
    }
    changeTab=(e)=> {
        this.setState({
            current: e.detail.current,
        })
    }
    render() {
        const element = navList.map((i, index) =>
            <View className={this.state.current === index ? "order-nav-item-atived" : "order-nav-item"} onClick={() => this.Actived(index)} key={i}>
                <View >{i}</View>
            </View>

        )
        return (<View>
            <View className="order-nav"><View className="nav">{element}</View></View>
            <View>
                <Swiper onChange={this.changeTab} className="order-swiper"  current={this.state.current}  >
                    {navList.map((i, index) =>
                        <SwiperItem className="order-swiper-item" key={index}>

                            <View className="order-list">
                                {
                                    [1, 2, 3, 4, 5].map((i) =>
                                        <Order key={i}></Order>
                                    )
                                }
                            </View>
                        </SwiperItem>
                    )}
                </Swiper>
            </View>
        </View>
        
        )
    }

}

function Order() {
    return (
        <View className="order-list-item">
            <View className="order-item-left"><Image className="shop-img" src="https://cube.elemecdn.com/1/54/f27176650496fb7a2880c81091141png.png?x-oss-process=image/format,webp/resize,w_64,h_64,m_fixed"></Image></View>
            <View className="order-item-right">
                <View className="shop-info">
                    <View>
                        <View>牛贰烧烤·高山黄牛肉</View>
                        <View style={{ fontSize: "12px" }}>本店下4单得￥5红包</View>
                    </View>
                    <View>
                        <AtIcon value="chevron-right"></AtIcon>
                    </View>
                    <View>已送达</View>
                </View>
                <View className="goods-info">
                    <View>炒河粉等4件商品</View>
                    <View>￥14.60</View>
                </View>
                <View className="order-func">
                    <AtButton className="buy">再来一单</AtButton>
                    <AtButton className="comment" >评价得进币</AtButton>
                </View>
            </View>
        </View>
    )
}


export default class Index extends Component {
    render() {
        return (
            <View className="order">
                <OrderList></OrderList>
            </View>
        )
    }
}

# index/index.scss
body{
    background-color: #f5f5f5;
}
.order{
    display: flex;
    width: 750px;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    .order-nav{
        background-color: #FFF;
        display: flex;
        font-size: 30px;
        justify-content: center;
        width: 750px;
        padding: 20px 0;
        .nav{
            width: 700px;
            display: flex;
            justify-content: space-between;
            .order-nav-item-atived{
                padding-bottom: 10px;
                border-bottom: #0085ff solid 4px;
                font-weight: bold;
                transform: 3s;
            }
    
        }
        
    }
    .order-swiper{
        width: 750px;
        height: 100vh;
   
        .order-swiper-item{
            .order-list{
                display: flex;
                flex-direction: column;
                align-items: center;
               .order-list-item{
                   width: 720px;
                   
                   background-color: #FFF;
                   display: flex;
                   padding-bottom: 30px;
                   margin-top: 20px;                   
                   border-radius: 10px;
                    
                   .order-item-left{
                       width: 100px;
                       padding: 30px;
                    .shop-img{
                        width: 60px;
                        height: 60px;
                    }
                }
                .order-item-right{
                    width: 530px;
                    .shop-info{
                        padding-top: 30px;
                        display: flex;
                        font-size: 30px;
                        justify-content: space-between;
                        
                    }
                    .goods-info{
                        padding-top:40px ;
                        display: flex;
                        font-size: 25px;
                        justify-content: space-between;

                    }
                    .order-func{
                        padding-top: 30px;
                        display: flex;
                        justify-content: flex-end;
                        .buy{
                            color: #0085ff;
                            border: #0085ff solid 1px;
                             height: 70px;
                             width: 180px;
                             font-size: 25px;
                             display: flex;
                             justify-content: center;
                             align-items: center;
                        }
                        .comment{
                             color: #ff5339;
                            border: #ff5339 solid 1px;
                            height: 70px;
                             width: 180px;
                             font-size: 25px;
 
                             display: flex;
                             justify-content: center;
                             align-items: center;
                        }
                    }
                }
                   
                   
               }
            }
        }
    }
}