传参

js中只有值传递

引用传递

传递引用指针

$$

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 1class MessageType {
 2  message: string = ''
 3}
 4
 5@Builder
 6function searchBox($$: MessageType) {
 7  Column() {
 8    Flex({
 9      justifyContent: FlexAlign.SpaceBetween
10    }) {
11      Image($r('app.media.startIcon'))
12        .width(28)
13      Image($r('app.media.startIcon'))
14        .width(28)
15    }
16    .height(30)
17    .width('100%')
18    .margin({
19      bottom: 8
20    })
21
22    // 搜索框设计
23    Row() {
24      Image($r('app.media.startIcon'))
25        .width(20)
26        .margin({
27          left: 12
28        })
29    }
30    .height(40)
31    .width('100%')
32    .backgroundColor(Color.White)
33    .borderRadius(20)
34
35    Text($$.message)
36  }
37}
38
39@Component
40export struct Home {
41  @State message: string = 'Hello'
42
43  build() {
44    Column() {
45      Stack({
46        alignContent: Alignment.Top
47      }) {
48        // 背景图
49        Image($r('app.media.background'))
50          .width('100%')
51          .height(220)
52          .borderRadius({
53            bottomLeft: 30,
54            bottomRight: 30
55          })
56          .objectFit(ImageFit.Auto)
57
58        // 弹性盒子, 内容布局
59        Flex({
60          direction: FlexDirection.Column
61        }) {
62          // 搜索模块
63          searchBox({ message: this.message })
64          Button('修改')
65            .onClick(() => {
66              this.message = 'Harmony'
67            })
68          // 轮播图片
69
70          // 楼层模块
71
72          // 商品列表
73        }
74        .padding({
75          left: 12,
76          right: 12,
77          top: 10
78        })
79      }
80    }
81    .backgroundColor('#f1f3f5')
82    .width('100%')
83    .height('100%')
84    .justifyContent(FlexAlign.Start)
85    .alignItems(HorizontalAlign.Start)
86  }
87}

轮播

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 1@Builder
 2function searchBox() {
 3  Column() {
 4    Flex({
 5      justifyContent: FlexAlign.SpaceBetween
 6    }) {
 7      Image($r('app.media.startIcon'))
 8        .width(28)
 9      Image($r('app.media.startIcon'))
10        .width(28)
11    }
12    .height(30)
13    .width('100%')
14    .margin({
15      bottom: 8
16    })
17
18    // 搜索框设计
19    Row() {
20      Image($r('app.media.startIcon'))
21        .width(20)
22        .margin({
23          left: 12
24        })
25    }
26    .height(40)
27    .width('100%')
28    .backgroundColor(Color.White)
29    .borderRadius(20)
30  }
31}
32
33@Builder
34function swiperBox(arr: Array<string>) {
35  Swiper() {
36    ForEach(arr, (item: string, index: number) => {
37      Image($r(item))
38        .width('100%')
39        .height(160)
40    }, (item: string) => item)
41  }
42  .indicator(true)
43  .itemSpace(1)
44  .width('100%')
45  .autoPlay(true)
46  .borderRadius(16)
47  .margin({
48    top: 20
49  })
50}
51
52@Component
53export struct Home {
54  @State swiperData: Array<string> = [
55    'app.media.bird',
56    'app.media.animal'
57  ]
58
59  build() {
60    Column() {
61      Stack({
62        alignContent: Alignment.Top
63      }) {
64        // 背景图
65        Image($r('app.media.background'))
66          .width('100%')
67          .height(220)
68          .borderRadius({
69            bottomLeft: 30,
70            bottomRight: 30
71          })
72          .objectFit(ImageFit.Auto)
73
74        // 弹性盒子, 内容布局
75        Flex({
76          direction: FlexDirection.Column
77        }) {
78          // 搜索模块
79          searchBox()
80          // 轮播图片
81          swiperBox(this.swiperData)
82          // 楼层模块
83
84          // 商品列表
85        }
86        .padding({
87          left: 12,
88          right: 12,
89          top: 10
90        })
91      }
92    }
93    .backgroundColor('#f1f3f5')
94    .width('100%')
95    .height('100%')
96    .justifyContent(FlexAlign.Start)
97    .alignItems(HorizontalAlign.Start)
98  }
99}

宽屏

瞬间滑动，产生鼠标控制器

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
  1import { BreakPointConstants } from "../constants/BreakPointConstants"
  2
  3@Builder
  4function searchBox() {
  5  Column() {
  6    Flex({
  7      justifyContent: FlexAlign.SpaceBetween
  8    }) {
  9      Image($r('app.media.startIcon'))
 10        .width(28)
 11      Image($r('app.media.startIcon'))
 12        .width(28)
 13    }
 14    .height(30)
 15    .width('100%')
 16    .margin({
 17      bottom: 8
 18    })
 19
 20    // 搜索框设计
 21    Row() {
 22      Image($r('app.media.startIcon'))
 23        .width(20)
 24        .margin({
 25          left: 12
 26        })
 27    }
 28    .height(40)
 29    .width('100%')
 30    .backgroundColor(Color.White)
 31    .borderRadius(20)
 32  }
 33}
 34
 35@Builder
 36function swiperBox(currentBreakPoint: string, arr: Array<string>) {
 37  Swiper() {
 38    ForEach(arr, (item: string, index: number) => {
 39      Image($r(item))
 40        .width('100%')
 41        .height(160)
 42    }, (item: string) => item)
 43  }
 44  .indicator(true)
 45  .itemSpace(currentBreakPoint == BreakPointConstants.BREAKPOINT_LG ? 10 : 0)
 46  .width('100%')
 47  .autoPlay(true)
 48  .borderRadius(16)
 49  .margin({
 50    top: 20
 51  })
 52  .displayCount(currentBreakPoint == BreakPointConstants.BREAKPOINT_LG ? 2 : 1)
 53}
 54
 55@Component
 56export struct Home {
 57  @StorageProp(BreakPointConstants.CURRENT_BREAKPOINT) currentBreakPoint: string = BreakPointConstants.BREAKPOINT_SM
 58  @State swiperData: Array<string> = [
 59    'app.media.bird',
 60    'app.media.animal',
 61    'app.media.bird',
 62    'app.media.animal'
 63  ]
 64
 65  build() {
 66    Column() {
 67      Stack({
 68        alignContent: Alignment.Top
 69      }) {
 70        // 背景图
 71        Image($r('app.media.background'))
 72          .width('100%')
 73          .height(220)
 74          .borderRadius({
 75            bottomLeft: 30,
 76            bottomRight: 30
 77          })
 78          .objectFit(ImageFit.Auto)
 79
 80        // 弹性盒子, 内容布局
 81        Flex({
 82          direction: FlexDirection.Column
 83        }) {
 84          // 搜索模块
 85          searchBox()
 86          // 轮播图片
 87          swiperBox(this.currentBreakPoint, this.swiperData)
 88          // 楼层模块
 89
 90          // 商品列表
 91        }
 92        .padding({
 93          left: 12,
 94          right: 12,
 95          top: 10
 96        })
 97      }
 98    }
 99    .backgroundColor('#f1f3f5')
100    .width('100%')
101    .height('100%')
102    .justifyContent(FlexAlign.Start)
103    .alignItems(HorizontalAlign.Start)
104  }
105}

Copyright ©2010-2022 比特日记 All Rights Reserved.

Powered By 可尔物语

浙ICP备11005866号-12