HarmonyOS 鸿蒙Next Swiper组件是否支持滑到最后一页文案设置

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Swiper组件是否支持滑到最后一页文案设置

Swiper组件是否支持设置滑动到最后一张时显示提示文案,在文档中也没有看到相关设置:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5

image.png


更多关于HarmonyOS 鸿蒙Next Swiper组件是否支持滑到最后一页文案设置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

可以参考这个来实现一下

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
 [@State](/user/State) list: number[] = [1, 2, 3];
 private swiperController: SwiperController = new SwiperController()
 innerScroller: Scroller = new Scroller;
 outsideScroller: Scroller = new Scroller;
 [@State](/user/State) viewMoreText: string = '左滑查看图文详情'
 [@State](/user/State) jumpToDetail:boolean = false;

 build() {
   Scroll(this.outsideScroller) {
     Column() {
       Scroll(this.innerScroller) {
         Row() {
           Swiper(this.swiperController) {
             ForEach(this.list, (item: number) => {
               Text(`item ${item}`)
                 .width(400)
                 .fontSize(40)
                 .textAlign(TextAlign.Center)
                 .backgroundColor('#ccc')
                 .height(200)
             })
           }
           .width(400)
           .loop(false)
           .effectMode(EdgeEffect.None)
           .nestedScroll(SwiperNestedScrollMode.SELF_FIRST)

           Text(this.viewMoreText).width(30)
         }
         .height(300)
         .justifyContent(FlexAlign.Start)
       }
       .scrollable(ScrollDirection.Horizontal)
       .scrollBar(BarState.Off)
       .edgeEffect(EdgeEffect.Spring)
       .backgroundColor(Color.Green)
       .onScroll((xOffset: number, yOffset: number) => {
         console.log('cur:::'+this.innerScroller.currentOffset().xOffset)
         if(this.innerScroller.currentOffset().xOffset > 50){
           this.jumpToDetail = true;
         }
       })
       .onScrollStop(()=>{
         if(this.jumpToDetail){
           this.innerScroller.scrollEdge(Edge.Start)
           this.outsideScroller.scrollTo({ xOffset: 0, yOffset: 300, animation: { duration: 50 } })
         }
       })
       Row() {
         Text('商品详情')
       }.backgroundColor(Color.Pink).height(1000).width('100%').alignItems(VerticalAlign.Top)
     }
     .alignItems(HorizontalAlign.Center)
     .justifyContent(FlexAlign.Center)
   }
 }
}

更多关于HarmonyOS 鸿蒙Next Swiper组件是否支持滑到最后一页文案设置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以的,哥🐂

滚动到最后的时候可以正常显示文案,此时不松手继续左右划还是能触发swiper的滑动,这个冲突咋解呢

作为IT专家,对于HarmonyOS鸿蒙Next Swiper组件的特性和功能有一定的了解。关于Swiper组件是否支持滑到最后一页设置文案的问题,以下是我的回答:

HarmonyOS鸿蒙Next Swiper组件本身并不直接支持在滑动到最后一页时自动设置特定文案的功能。然而,开发者可以通过编程实现这一需求。

具体来说,开发者可以在Swiper组件上监听滑动事件,通过回调函数监测当前Swiper的滑动状态。当滑动到最后一页时,可以触发一个事件或函数,用于显示或设置特定的文案。

实现这一功能的关键在于监听滑动事件并判断当前页码是否为最后一页。一旦确认滑动到最后一页,就可以通过更新UI组件或状态变量的方式来显示所需的文案。

此外,HarmonyOS提供了丰富的UI组件和API,开发者可以灵活运用这些工具来创建符合自己需求的用户界面。

需要注意的是,虽然HarmonyOS提供了强大的开发工具和组件库,但具体实现方式可能因项目需求和开发环境的不同而有所差异。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!