HarmonyOS Photos Column Swiper Grid

✨️index

title swiper list(grid)

import coms from '../pages/com'
@Entry
@Component
struct Index {
  @State message: string = 'Hello World1'
//private  list = new con
  build() {
    Column() {
      //标题
      Row(){
        Text('photos')
        .fontSize('30fp')

        .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.Start)
      .width('100%')
      .padding('12vp')



      //轮播
        Swiper() {
        ForEach(coms.SWIPERLIST,(item:Resource,index?:Number)=>{
          Row() {
            Image(item)

          }
          .width('100%')
          .aspectRatio(1.6)


        })

 

          }
        .autoPlay(true)
        .loop(true)
        .indicator(true)
        .duration(1000)
        .itemSpace(10)
        .borderRadius('12vp')
        .margin('12vp')
        .onChange((index: number) => {

        })
      //列表
      Grid(){

        GridItem(){
          Column(){

            Image($r('app.media.icon'))
              .borderRadius(2)
          }
        }
        GridItem(){
          Column(){

            Image($r('app.media.icon'))
              .borderRadius(2)
          }
        }
        GridItem(){
          Column(){

            Image($r('app.media.icon'))
              .borderRadius(2)
          }
        }
        GridItem(){
          Column(){

            Image($r('app.media.44'))
              .borderRadius(2)
          }
        }
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap('12vp')
      .rowsGap('12vp')

      //.padding('2vp')
    }
    .width('100%')
    .height('100%')


  }
}

核心Grid的

      .columnsTemplate('1fr 1fr  ')    

轮播数据 合并data
data

export default class com{
  static  SWIPERLIST:Array<Resource>=[
    $r('app.media.11'),
    $r('app.media.22'),
    $r('app.media.33'),
    $r('app.media.44'),
    $r('app.media.11')
  ]

}

列表数据

 static  IMGLIST :Resource[][]=[
 [
    $r('app.media.11'),
    $r('app.media.22'),
    $r('app.media.33'),
    $r('app.media.44'),
    $r('app.media.11')],

    [
    $r('app.media.22'),
    $r('app.media.11'),
    $r('app.media.33'),
    $r('app.media.44'),
    $r('app.media.11')]

    ,
    [
    $r('app.media.44'),
    $r('app.media.11'),
    $r('app.media.33'),
    $r('app.media.44'),
    $r('app.media.11')]
    ,
    [
    $r('app.media.33'),
    $r('app.media.11'),
    $r('app.media.33'),
    $r('app.media.44'),
    $r('app.media.11')]

  ]

//
     ForEach(coms.IMGLIST,(item:Array< Resource>,index?:Number)=>{
          GridItem(){
            Column(){

              Image(item[0])
                .borderRadius(2)
                .aspectRatio(1.6)
                .borderRadius('5vp')
                .margin('5vp')
             //   .padding('5vp')
            }
          }

🎈pagelist p2

router
P2

   .onClick(()=>{
            router.pushUrl({
              url:'pages/ListPage',
                params:{ptitem:item}
            })
          })

main_pages.js配置路由

  //ts Record
  item:Array<Resource> =    (router.getParams() as Record<string, Array<Resource>>).item;


//...

    Navigation(){

      Grid()
      {

        ForEach(this.item,(item2: Resource,index?:Number)=> {
          GridItem() {


            Image(item2)

              .borderRadius(2)
              .aspectRatio(1.6)
              .borderRadius('5vp')
              .margin('5vp')
            //   .padding('5vp')

          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(5)
      .rowsGap(5)
      .margin('12vp')

    }
    .title('p2')
    .hideNavBar(false)
    .titleMode(NavigationTitleMode.Mini)

hmos里面的console.log

//log
  hilog.info(0x0000,'image','abc');

🪄page p3

router

  item3:Resource =    (router.getParams() as Record<string, Resource>).item3;// []



  build() {

    Navigation(){


        Image(this.item3)

          .borderRadius(2)
          .aspectRatio(1.6)
          .borderRadius('5vp')
          .margin('5vp')

    }
    .title('p3')
    .hideNavBar(false)
    .titleMode(NavigationTitleMode.Mini)

end