taro tab和swiper联动

最新推荐文章于 2024-07-31 20:36:26 发布

原创

最新推荐文章于 2024-07-31 20:36:26 发布 · 746 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jsx #js #react

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="orde