【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
    @Component
    export 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 })
      }
    }