HarmonyOS鸿蒙Next中Swiper滑动问题

HarmonyOS鸿蒙Next中Swiper滑动问题 就是滑动到最后出现添加组件的时候,然后从左往右划,会直接多滑动一个swiper的页面宽度。

3 回复
import { SizeUtils } from './SizeUtils'

@Entry
@Component
struct GridPage {
  @State message: string = 'Hello World';
  private scroller: Scroller = new Scroller()
  @State currentIndex: number = 0
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue];
  @State swiperEnable:boolean = true;
  @State directionRight:boolean = false;//false - right, true - left
  build() {
    Scroll(this.scroller) {
      Row() {
        Swiper() {
          ForEach(this.bgColors, (Item: Color, index: number) => {
            Row() {
              Text(`${index}`)
            }
            .width(SizeUtils.realSize(295))
            .height(100)
            .backgroundColor(Item)
          })
          // 判断宝贝数量,最大只能添加10个
        }
        .enabled(this.swiperEnable)
        .margin({ top: 40 })
        .loop(false)
        .width('100%')
        .height('25%')
        .nestedScroll(SwiperNestedScrollMode.SELF_FIRST)
        .indicator(
          Indicator.dot()
          .itemWidth(5)
          .itemHeight(5)
          .selectedItemWidth(10)
          .selectedItemHeight(5)
          .selectedColor('#FFFFFF')
          .color('#80ffffff')
        )
        .displayMode(SwiperDisplayMode.STRETCH)
        .itemSpace(6)
        .nextMargin(10)
        .prevMargin(10)
        .id('row1')
        .onChange((index) => {
          this.currentIndex = index
          console.log('bb', index)
        })
        .effectMode(EdgeEffect.None)
        if (this.bgColors.length < 10) {
          Row() {
            Text(`添加`)
          }
          .width(100)
          .height(100)
          .backgroundColor(Color.Red)
          .margin({left:10})
        }
      }
    }
    .width('100%')
    .scrollable(ScrollDirection.Horizontal)
    .scrollBar(BarState.Off)
    .onDidScroll((xOffset: number, yOffset: number, scrollState: ScrollState)=>{
      console.log('xoffset',this.scroller.currentOffset().xOffset);
      if (xOffset > 0) {
        this.directionRight = true;
      }
      if(xOffset < 0){
        this.directionRight = false;
      }
      if (this.scroller.currentOffset().xOffset == 0) {
        this.swiperEnable = true;
      }else {
        this.swiperEnable = false;
      }
    })
    .onScrollStop(()=>{
      this.scroller.scrollEdge( this.directionRight ? Edge.End:Edge.Top)
    })
  }
}

更多关于HarmonyOS鸿蒙Next中Swiper滑动问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,Swiper组件用于实现滑动效果,常见于轮播图、页面切换等场景。Swiper通过设置loop属性可以实现循环滑动,autoplay属性可以自动播放。滑动过程中,可以通过onChange事件监听滑动索引变化。Swiper的indicator属性用于显示指示器,duration属性控制滑动动画时长。在开发过程中,确保Swiper的子组件数量大于1,否则滑动功能无法生效。若遇到滑动卡顿或异常,检查布局嵌套和组件渲染性能。

在HarmonyOS鸿蒙Next中,Swiper组件用于实现滑动切换效果。若遇到滑动问题,可检查以下几点:

  • 布局设置:确保Swiper及其子组件布局正确,宽度和高度设置合理。
  • 数据绑定:检查数据源是否正确绑定,数据项数量与Swiper子组件数量匹配。
  • 事件监听:确认滑动事件监听器是否正确添加,处理逻辑无误。
  • 样式冲突:排查是否有CSS样式影响滑动效果,如overflow属性设置不当。
  • 组件版本:确保使用的Swiper组件版本与HarmonyOS SDK兼容。
  • 调试日志:通过日志查看滑动过程中是否有异常信息输出。

若问题仍未解决,建议参考官方文档或社区资源,获取更多技术支持。

回到顶部