HarmonyOS 滚动事件相关的解决方案

以为grid容器中的onScrollBarUpdate事件可以获取组件内容的总长度和当前的位置,返回一个ComputedBarAttribute,但是示例表示,示例代码不能通用,如果我需要的效果能通过这个事件解决,希望能给我一个ComputedBarAttribute的通用计算方式,我能够在各个场景都能使用,获取到Grid内容相对显示区域的总偏移,Grid内容总长度,若不该组件或者事件不能达到效果,希望能提供一个demo

HarmonyOS
2025-01-09 15:57:48
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

请参考如下demo

@Entry
@Component
struct GridExample {
  @State numbers: String[] = ['0', '1', '2', '3', '4','0', '1', '2', '3',
    '4','0', '1', '2', '3', '4','0', '1', '2', '3', '4','0',
    '1', '2', '3', '4','0', '1', '2', '3', '4']
  scroller: Scroller = new Scroller()
  @State gridPosition: number = 0 //0代表滚动到grid顶部,1代表中间值,2代表滚动到grid底部。
  @State progressValue: number = 0    // 设置进度条初始值为0
  @State ViewWidth: number = 300 //grid的宽度
  build() {
    Column({ space: 5 }) {
      Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
      Grid(this.scroller) {
        ForEach(this.numbers, (day: string) => {
          GridItem() {
            Text(day)
              .fontSize(16)
              .backgroundColor(0xF9CF93)
              .width(40)
              .height(80)
              .textAlign(TextAlign.Center)
          }
        })
      }
      .rowsTemplate('1fr')
      .columnsGap(10)
      .friction(0.6)
      .enableScrollInteraction(true)
      .supportAnimation(false)
      .multiSelectable(false)
      .edgeEffect(EdgeEffect.Spring)
      .scrollBar(BarState.Off)
      .width(this.ViewWidth)
      .height(80)
      .onScrollIndex((first: number, last: number) => {
        console.info(first.toString())
        console.info(last.toString())
      })
      .onScrollBarUpdate((index: number, offset: number) => {
        console.info("XXX" + 'Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString())
        //当是横向时,index*(宽度+间隔)减去 offset  总长度 数量*长度
        let offest1 = index * (40 + 10) - offset
        let totalLength1 = 40 * this.numbers.length + 10 * (this.numbers.length - 1)
        this.progressValue = offest1/(totalLength1 - this.ViewWidth)
        return { totalOffset: offest1, totalLength: totalLength1}
      })
      Progress({value:0, total:1, type:ProgressType.Linear}).width(200).value(this.progressValue)
    }.width('100%').margin({ top: 5 })
  }
}
分享
微博
QQ
微信
回复
2025-01-09 18:18:37
相关问题
HarmonyOS事件通信能力解决方案
2383浏览 • 1回复 待解决
HarmonyOS 音视频处理相关解决方案
2122浏览 • 1回复 待解决
List滚动条时长时短,求解决方案
1866浏览 • 1回复 待解决
HarmonyOS代码封装解决方案
1950浏览 • 1回复 待解决
HarmonyOS 通知推送解决方案
1696浏览 • 1回复 待解决
HarmonyOS 音频播放组件解决方案
1294浏览 • 1回复 待解决
高级图表实现解决方案
1939浏览 • 1回复 待解决
确认网络状况解决方案
2097浏览 • 1回复 待解决
HarmonyOS 部分文本高亮解决方案
2045浏览 • 1回复 待解决
HarmonyOS C++模块引用解决方案
1819浏览 • 1回复 待解决
HarmonyOS webrtc同屏功能解决方案
1245浏览 • 1回复 待解决
抓包应用,求解决方案
3216浏览 • 1回复 待解决
HarmonyOS有访问相册有解决方案
1494浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
2026浏览 • 1回复 待解决
HarmonyOS 卡片列表网络图片解决方案
1356浏览 • 1回复 待解决
图像处理库是否有替代解决方案
1516浏览 • 0回复 待解决
包大小优化,有没有好解决方案
1454浏览 • 1回复 待解决
应用包体积大小优化解决方案
2063浏览 • 1回复 待解决
图片存储解决方案谁知道啊?
3702浏览 • 1回复 待解决
开发疑难问题如下,求解决方案
1383浏览 • 1回复 待解决
支持图文混排组件及解决方案
1371浏览 • 1回复 待解决