【鸿蒙踩坑记录】解决:list组件滑动至左边或右边,回弹效果过大问题

一、问题描述

开发过程中使用List组件,当内容超过一屏时可出现滚动效果,此时按住内容迅速滑动至左边,或者滑动到右边,回弹效果过大

期望:滑动时,不要有那么大的回弹效果

二、目前效果

三、解决方法

3.1、示例代码:

class navArr {
  img: Resource
  text: string

  constructor(img: Resource, text: string) {
    this.img = img
    this.text = text
  }
}

@Entry
@Component
struct navList {
  @State navList: Array<navArr> = [
    new navArr($r('app.media.navImg'), '1'),
    new navArr($r('app.media.navImg'), '2'),
    new navArr($r('app.media.navImg'), '3'),
    new navArr($r('app.media.navImg'), '4'),
    new navArr($r('app.media.navImg'), '5'),
    new navArr($r('app.media.navImg'), '6'),
    new navArr($r('app.media.navImg'), '7'),
    new navArr($r('app.media.navImg'), '8'),
    new navArr($r('app.media.navImg'), '9'),
    new navArr($r('app.media.navImg'), '10'),
  ]

  build() {
    List() {
      ForEach(this.navList, (item: navArr) => {
        ListItem() {
          Column({ space: 5 }) {
            Image(item.img).width(60).height(60)
            Text(item.text)
              .fontSize(12)
              .fontWeight(400)
              .textAlign(TextAlign.Center)
          }.width(100).height(100)
        }
        .margin({ top: 14 })
      })
    }
    .scrollBar(BarState.Off)
    .listDirection(Axis.Horizontal)
    .lanes(2)
    .height(200)
    .backgroundColor(Color.Gray)
    .margin({top:20})
  }
}

3.2、解决方法:给List组件添加edgeEffect属性

edgeEffect:List组件的边缘滑动效果,支持弹簧效果和阴影效果。

默认值:EdgeEffect.Spring

EdgeEffect的参数介绍:资料来自于官网文档中心 

代码里面给list添加edgeEffect(EdgeEffect.None)

 四、最终效果

🚀🚀🚀  踩坑不易,还希望各位大佬支持一下

📃 我的土拨鼠开源项目:

✍Gitee开源项目地址👉:https://gitee.com/cheinlu/groundhog-charging-system

✍GitHub开源项目地址👉:https://github.com/cheinlu/groundhog-charging-system

📃 我的鸿蒙NEXT轮播图开源组件:https://gitee.com/cheinlu/harmony-os-next-swiper

最后:👏👏😊😊😊👍👍  

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值