当前位置：网站首页>【Harmony OS】【FAQ】鸿蒙问题合集2

【Harmony OS】【FAQ】鸿蒙问题合集2

2022-08-04 15:02:00 【51CTO】

1、问题描述：

swiper嵌套子组件，子组件里面有PanGesture，有冲突swiper消费了滑动手势，该如何解决？

demo如下：

       
       // @ts-nocheck
       
       @
       
       Entry
       
       @
       
       Component
       
       struct 
       
       PanGestureExample {
       
       @
       
       State 
       
       offsetX: 
       
       number 
       
       = 
       
       0
       
       @
       
       State 
       
       offsetY: 
       
       number 
       
       = 
       
       0
       
       build() {
       
       Flex({ 
       
       direction: 
       
       FlexDirection.
       
       Column, 
       
       alignItems: 
       
       ItemAlign.
       
       Center, 
       
       justifyContent: 
       
       FlexAlign.
       
       SpaceBetween }) {
       
       Text(
       
       'PanGesture offset:\nX: ' 
       
       + 
       
       this.
       
       offsetX 
       
       + 
       
       '\n' 
       
       + 
       
       'Y: ' 
       
       + 
       
       this.
       
       offsetY)
       
    }
       
    .
       
       height(
       
       100).
       
       width(
       
       200).
       
       padding(
       
       20).
       
       border({ 
       
       width: 
       
       1 }).
       
       margin(
       
       80)
       
    .
       
       translate({ 
       
       x: 
       
       this.
       
       offsetX, 
       
       y: 
       
       this.
       
       offsetY, 
       
       z: 
       
       5 })
       
    .
       
       gesture(
       
       PanGesture({})
       
      .
       
       onActionStart((
       
       event: 
       
       GestureEvent) 
       
       => {
       
       console.
       
       info(
       
       'Pan start')
       
      })
       
      .
       
       onActionUpdate((
       
       event: 
       
       GestureEvent) 
       
       => {
       
       this.
       
       offsetX 
       
       = 
       
       event.
       
       offsetX
       
       this.
       
       offsetY 
       
       = 
       
       event.
       
       offsetY
       
      })
       
      .
       
       onActionEnd(() 
       
       => {
       
       console.
       
       info(
       
       'Pan end')
       
      })
       
    )
       
  }
       
}
      
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.

【Harmony OS】【FAQ】鸿蒙问题合集2_FAQ

解决方案：

建议在PhotoView的父组件Swiper上设置priorityGesture属性，默认情况下，子组件优先于父组件识别手势，当父组件配置priorityGesture时，父组件优先于子组件进行识别。参考如下代码：

       
       Swiper()
       
       ...
       
.
       
       priorityGesture(
       
       TapGesture()
       
  .
       
       onAction(() 
       
       => {
       
  }), 
       
       GestureMask.
       
       IgnoreInternal
       
)
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

【Harmony OS】【FAQ】鸿蒙问题合集2_FAQ_02

2、问题描述：

eTS scroll 组件，设置scrollable(ScrollDirection.Horizontal)时，为什么横向滚动滚动条不显示？

demo如下：

       
       @
       
       Entry
       
       @
       
       Component
       
       struct 
       
       scrollerPage {
       
       scroller: 
       
       Scroller 
       
       = 
       
       new 
       
       Scroller()
       
       private 
       
       arr: 
       
       number[] 
       
       = [
       
       0, 
       
       1, 
       
       2, 
       
       3, 
       
       4, 
       
       5, 
       
       6, 
       
       7, 
       
       8, 
       
       9]
       
       build() {
       
       Stack({ 
       
       alignContent: 
       
       Alignment.
       
       TopStart }) {
       
       Scroll(
       
       this.
       
       scroller) {
       
       Row({ 
       
       space: 
       
       20 }) {
       
       Row().
       
       width(
       
       150).
       
       height(
       
       50).
       
       backgroundColor(
       
       0xAFEEEE)
       
       Row().
       
       width(
       
       150).
       
       height(
       
       50).
       
       backgroundColor(
       
       0x00FFFF)
       
        }.
       
       width(
       
       "200%").
       
       height(
       
       52).
       
       border({ 
       
       width: 
       
       1 }).
       
       margin({ 
       
       top: 
       
       20 })
       
      }
       
      .
       
       scrollable(
       
       ScrollDirection.
       
       Horizontal).
       
       scrollBar(
       
       BarState.
       
       On)
       
      .
       
       scrollBarColor(
       
       Color.
       
       Red).
       
       scrollBarWidth(
       
       30)
       
      .
       
       onScroll((
       
       xOffset: 
       
       number, 
       
       yOffset: 
       
       number) 
       
       => {
       
       console.
       
       info(
       
       xOffset 
       
       + 
       
       ' ' 
       
       + 
       
       yOffset)
       
      })
       
      .
       
       onScrollEdge((
       
       side: 
       
       Edge) 
       
       => {
       
       console.
       
       info(
       
       'To the edge')
       
      })
       
      .
       
       onScrollEnd(() 
       
       => {
       
       console.
       
       info(
       
       'Scroll Stop')
       
      })
       
    }.
       
       width(
       
       '100%').
       
       height(
       
       '100%').
       
       backgroundColor(
       
       0xDCDCDC)
       
  }
       
}
      
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.

【Harmony OS】【FAQ】鸿蒙问题合集2_FAQ_03

解决方案：

横向的Scroll是没有滑动条显示的，如果需要可以用ScrollBar组件自定义

js中类似于scrollview是list和list-item组件联合使用，示例如下：

1、对应hml中遍历js中定义的imageList数据：

       
       <list class="text_container">
       
<list-item type="listItem" for="{{imageList}}">
       
  <image class="img" src="{{$item.value}}"></image>
       
</list-item>
       
</list>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.

【Harmony OS】【FAQ】鸿蒙问题合集2_FAQ_04

2、对应js中的imageList定义：

       
       data: {
       
imageList:"/common/1.jpg"}, {value:"/common/2.jpg"}, {value:"/common/3.jpg"}, {value:"/common/4.jpg"}],
       
}
      
1.
2.
3.
4.
5.

【Harmony OS】【FAQ】鸿蒙问题合集2_FAQ_05

3、可将步骤1中image标签改为div等标签自行定义

4、默认为纵向，横向、纵向属性分别如下：

       
       style="flex-direction:row"
       
style="flex-direction:column"
      
1.
2.
3.

【Harmony OS】【FAQ】鸿蒙问题合集2_FAQ_06

3、问题描述：

设备的DVID有什么方式可以校验是否是真实的设备吗？

解决方案：

DVID不是某个设备的ID，是指由同一个鸿蒙账号的多个设备组成一个超级终端后的虚拟ID

欲了解更多更全技术文章，欢迎访问 https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://blog.51cto.com/u_14772288/5543848

当前位置：网站首页>【Harmony OS】【FAQ】鸿蒙问题合集2

【Harmony OS】【FAQ】鸿蒙问题合集2

边栏推荐

猜你喜欢

随机推荐