滑动选择组件,有谁知道怎么解决吗?


HarmonyOS
2024-05-26 15:24:53
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zxjiu

本文主要将一组组件排列,通过在上面滑动,将滑动的组件选中。

使用的核心API

触摸事件

核心代码解释

1.排列子组件

 Row() { 
  
          ForEach(this.text_list1, (value: string,idx:number) => { 
            Text(value) 
              .width(this.childWidth) 
              .height(this.childHeight) 
              .fontSize(20) 
              .backgroundColor(this.color_list1[Math.floor(8*Math.random())]) 
              .textAlign(TextAlign.Center) 
          }) 
        } 
        .height(this.childHeight) 
        .width(this.childWidth*this.text_list1.length)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

2.给父组件添加onTouch事件,根据滑动的坐标记录子组件

 .onTouch((event: TouchEvent) => { 
          if (event.type === TouchType.Down) { 
            if (this.isOnTouchInParent(event)) { 
              this.displayMsg = '#<' 
              this.textTemp = this.getChildText(event) 
              this.displayMsg = this.displayMsg + this.textTemp 
            } 
          } 
          if (event.type === TouchType.Up) { 
            if (this.isOnTouchInParent(event)) { 
              this.displayMsg = this.displayMsg + '>' 
              this.textTemp = '' 
            } 
  
          } 
          if (event.type === TouchType.Move) { 
            if (this.isOnTouchInParent(event)) { 
              if (this.textTemp === this.getChildText(event)) { 
  
              }else { 
                this.textTemp = this.getChildText(event) 
                this.displayMsg = this.displayMsg + this.textTemp 
              } 
  
            } 
          } 
        })
  • 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.

3.判断子组件是否合规与重复

isOnTouchInParent(event: TouchEvent) :boolean{ 
    if (event.touches[0].x>0 &&event.touches[0].x<=this.childWidth*this.text_list1.length && event.touches[0].y>0&&event.touches[0].y<this.childWidth) { 
      return true; 
    } 
    return false 
  } 
  getChildText(event: TouchEvent) :string{ 
    return this.text_list1[Math.floor(event.touches[0].x/this.childWidth)] 
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
分享
微博
QQ
微信
回复
2024-05-27 20:25:57
相关问题
有谁知道沙箱目录怎么获取
3541浏览 • 1回复 待解决
有谁知道web组件如何下拉刷新
2452浏览 • 1回复 待解决
JSVM使用示例,有谁知道
2157浏览 • 1回复 待解决
有谁知道如何生成UUID
2514浏览 • 1回复 待解决
有谁知道如何创建 JSONObject
1135浏览 • 1回复 待解决
有谁知道flexBasis使用问题
1729浏览 • 1回复 待解决
有谁知道ArkTS支持隐式跳转
2842浏览 • 1回复 待解决
动态页面跳转方案,有谁知道
2870浏览 • 1回复 待解决
有谁知道ArkTS支持定时器
3867浏览 • 1回复 待解决
设备唯一ID,有谁知道怎么处理?
2929浏览 • 1回复 待解决
有谁知道可以直接使用so库
2186浏览 • 1回复 待解决
同进程多Hap问题 ,有谁知道
2391浏览 • 1回复 待解决
有谁知道如何主动关闭应用
2863浏览 • 1回复 待解决
有谁知道如何理解栅格布局
1346浏览 • 1回复 待解决
有谁知道Image图片取反色
3091浏览 • 1回复 待解决
有谁知道应用升级的方式
2567浏览 • 1回复 待解决
有谁知道常用AppFreeze使用指导
2180浏览 • 1回复 待解决
有谁知道怎么解决啊?
2569浏览 • 1回复 待解决