fish_app/src/pages/index/index.jsx

import Taro from "@tarojs/taro"; // 导入 Taro
import { Component } from "react";
import { View, Image, Swiper, SwiperItem, Text } from "@tarojs/components";
import { AtTabs } from "taro-ui";
import "./index.less";
import SearchBar from "../../components/index/SearchBar"; //搜索框
import CategoryList from "../../components/index/CategoryList"; //分类列表
import OperationArea from "../../components/index/OperationArea"; //运营区域
import RecommendList from "../../components/index/RecommendList"; //邀请人推荐
import ProductList from "../../components/index/ProductList"; //商品列表
import myStoreIcon from "../../images/index/myStore.png";
import backTopIcon from "../../images/index/back-top.png";

export default class Index extends Component {
  state = {
    value: "",
    current: 0, // 添加当前选中的tab索引
    tabList: [
      // 添加模拟的tab数据
      { title: "推荐" },
      { title: "男装" },
      { title: "女装" },
      { title: "运动" },
      { title: "数码" },
      { title: "美妆" },
      { title: "箱包" },
      { title: "家居" },
      { title: "食品" },
      { title: "母婴" },
    ],
    bannerList: [
      {
        id: 1,
        img: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
      },
      {
        id: 2,
        img: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
      },
      {
        id: 3,
        img: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
      },
    ],
    categoryList: [
      { id: 1, icon: "购物袋图标URL", name: "超市" },
      { id: 2, icon: "手机图标URL", name: "数码" },
      { id: 3, icon: "衣服图标URL", name: "服饰" },
      { id: 4, icon: "生鲜图标URL", name: "生鲜" },
      { id: 5, icon: "美妆图标URL", name: "美妆" },
      { id: 6, icon: "家电图标URL", name: "家电" },
      { id: 7, icon: "餐具图标URL", name: "餐厨" },
      { id: 8, icon: "书本图标URL", name: "图书" },
      { id: 9, icon: "药品图标URL", name: "医药" },
      { id: 10, icon: "更多图标URL", name: "更多" },
    ],
  };

  handleChange(value) {
    this.setState({ value });
  }
  // 添加tab切换处理函数
  handleClick(value) {
    this.setState({
      current: value,
    });
  }
  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  // 添加回到顶部方法
  handleBackTop = () => {
    Taro.pageScrollTo({
      scrollTop: 0,
      duration: 300,
    });
  };

  render() {
    return (
      <View className="index">
        <View
          className="header"
          style={{ paddingTop: Taro.navigationBarHeight  + "px" }}
        >
          <View className="header-content">
            <Image
              className="header-img"
              src="https://video-img.fyshark.com/1731495433480WechatIMG674.jpg"
            />
          </View>
          {/* 搜索框 */}
          <SearchBar
            value={this.state.value}
            onChange={this.handleChange}
            onSearch={this.handleSearch}
          />
          {/* tab分类 */}
          <View className="tabs-list">
            <AtTabs
              current={this.state.current}
              scroll
              tabList={this.state.tabList}
              onClick={this.handleClick.bind(this)}
            />
            <View className="tab-more">
              <Image className="tab-more-img" />
            </View>
          </View>
          {/* 轮播图 */}
          <View className="banner-wrap">
            <Swiper
              className="banner-swiper"
              circular
              autoplay
              indicatorDots
              indicatorColor="#e8e8e8"
              indicatorActiveColor="#ffffff"
            >
              {this.state.bannerList.map((item) => (
                <SwiperItem className="banner-item" key={item.id}>
                  <Image
                    className="banner-img"
                    src={item.img}
                    mode="aspectFill"
                  />
                </SwiperItem>
              ))}
            </Swiper>
          </View>
        </View>
        {/* 分类列表组件 */}
        <CategoryList categoryList={this.state.categoryList} />
        {/* 运营区域 */}
        <OperationArea />
        {/* 邀请人推荐 */}
        <RecommendList />
        {/* 商品列表 */}
        <ProductList />

        {/* 添加浮动按钮 */}
        <View className="float-buttons">
          <View
            className="float-btn"
          >
            <Image
              className="my-shop-bg"
              src={myStoreIcon}
              mode="aspectFit"
            />
            <Text>我的{"\n"}小店</Text>
          </View>
          <View
            className="float-btn"
            onClick={this.handleBackTop}
          >
            <Image
              className="back-top"
              src={backTopIcon}
              mode="aspectFit"
            />
          </View>
        </View>
      </View>
    );
  }
}