【HarmonyOS App】从0到1开发购物应用App(2)：开发首页

预览

相关组件

• Search：搜索框组件，适用于浏览器的搜索内容输入框等应用场景。
• Swiper：滑块视图容器，提供子组件滑动轮播显示的能力。
• Grid：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
• • Marquee：跑马���组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。

    完整代码

    import GoodsList from "../../components/goodsList"import publicApi from "../../api/index"import router from '@ohos.router'@Entry@Componentexport default struct Home {  scroller: Scroller = new Scroller()  private swiperController: SwiperController = new SwiperController()  textTimerController: TextTimerController = new TextTimerController()  @State swiperList: any = [    'https://img1.baidu.com/it/u=3953008485,1470810916&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1703869200&t=efa4eb75858aa35be29a825dbc782556',    'https://img2.baidu.com/it/u=89428783,598609419&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1703869200&t=9384207a9803da3c177fe07614cf3d8c',    'https://img2.baidu.com/it/u=1842450460,1583105677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=208',  ]  @State tabsList: object[] = [    { name: '砍价活动', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/2022062414322367e6a5479.png' },    { name: '拼团活动', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624143223798a31616.png' },    { name: '限时秒杀', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/202206241432233bf9e9321.png' },    { name: '热销榜单', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624143223839e33279.png' },    { name: '领券中心', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624143223f68476108.png' },    { name: '积分签到', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/202206241432238059f4396.png' },    { name: '积分抽奖', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/2022062414322330e7b4149.png' },    { name: '商城资讯', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624143622847ab7155.png' },    { name: '开源', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624144414783817921.png' },    { name: '帮助中心', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/202206241435258effe0820.png' },  ]    // 页面初始化  aboutToAppear(){    console.log('aboutToAppear============')    /*限时秒杀 倒计时开始*/    // this.textTimerController.start()  }  // 页面切到前台显示  onPageShow() {    console.log('onPageShow==========')  }  // 页面切到后台显示  onPageHide(){    console.log('onPageHide==========')  }  build() {    Scroll(this.scroller) {      /*顶部*/      Column() {        /*搜索框*/        Row(){          Image($r('app.media.ic_public_search')).width(20).height(20)          Text('请输入搜索关键字').fontColor($r('app.color.color_info')).fontSize(14)        }.backgroundColor('#ffffff').borderRadius(30).width('100%').height(40).padding({left: 10})        .onClick(()=>{          router.pushUrl({            url: 'pages/home/search'          })        })        /*轮播图*/        Swiper(this.swiperController) {          ForEach(this.swiperList, (item: string) => {            Image(item)              .alt($r('app.media.img_alt'))              .height(150)              .borderRadius(10)          }, item => item)        }        .indicatorStyle({ color: '#f3f4f6', selectedColor: '#ffffff' })        .margin({ top: 10 })        .autoPlay(true)        .interval(4000)        .indicator(true)        .loop(true)        .duration(1000)        .itemSpace(0)        .curve(Curve.Linear)        .onChange((index: number) => {          console.info(index.toString())        })        /*金刚区*/        Grid() {          ForEach(this.tabsList, (item: any) => {            GridItem() {              Column() {                Image(item.icon)                  .width(30)                  .height(30)                Text(item.name)                  .margin({ top: 10 })                  .fontSize(12)              }            }          }, item => item.name)        }        .columnsTemplate('1fr 1fr 1fr 1fr 1fr')        .rowsTemplate('1fr 1fr')        .backgroundColor('#fff')        .height(160)        .borderRadius(10)        .margin({ top: 10 })        .padding(10)        /*商城资讯*/        Row() {          Image($r('app.media.icon_toutiao'))            .width(60)          Divider().vertical(true).margin({ left: 10, right: 10 }).height(15)          /*资讯标题  跑马灯*/          Marquee({            start: true,            step: 20,            loop: Infinity,            fromStart: true,            src: '双12活动预告双12活动预告双12活动预告'          })            .width('70%')            .fontSize(14)        }        .backgroundColor('#fff')        .borderRadius(10)        .padding(15)        .width('100%')        .margin({ top: 10 })        /*banner图*/        Image($r('app.media.banner'))          // .alt($r('app.media.img_alt'))          .margin({ top: 10 })          .width('100%')          .borderRadius(5)        .onClick(()=>{          router.pushUrl({            url: `pages/home/goods_info`,            params: {              id: 123            }          })        })        Row(){          Text('热门推荐').fontColor($r('app.color.color_primary'))          Text('限时优惠').fontSize(14).margin({left: 10})        }.margin({top: 20})        /*推荐商品列表*/        GoodsList({          // list: this.goods        }).margin({top: 10})      }      .padding(10)      .backgroundImage('https://php-b2c.likeshop.cn/uploads/images/202106011057029f7988147.jpg')      .backgroundImageSize({ width: '100%' })    }    .backgroundColor('#f8f8f8')    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向    .scrollBar(BarState.Off) // 滚动条隐藏    .edgeEffect(EdgeEffect.None)    // .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })  }}