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> ); } }