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