tab的tabContent中 使用 nestscroll+tab 吸顶 条目显示不全

问题原因:ListItem 被 Tabs 挡住了

解决方案一:

在列表结尾处多渲染一个空的 ListItem

解决方案二:使用 contentEndOffset API 实现列表结尾偏移

@ComponentV2
export struct PageList002 {
  @Local arr: number[] = []

  aboutToAppear() {
    for (let i = 0; i < 30; i++) {
      this.arr.push(i)
    }
  }

  @Local selectedIndex: number = 0
  private controller: TabsController = new TabsController()
  private listScroller: ListScroller = new ListScroller()
  @Styles
  listCard() {
    .backgroundColor(Color.White)
    .height(72)
    .width("100%")
    .borderRadius(12)
  }
  //Tabs的简单使用可以查看之前的文章,案例演示
  tabs: string[] = ['生活服务', '办公必备', '出行出差'];
  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.selectedIndex === index ? '#007DFF' : '#182431')
        .fontSize(16)
        .fontWeight(this.selectedIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .width(20)
        .margin({bottom:15})
        .color('#007DFF')
        .opacity(this.selectedIndex === index ? 1 : 0)
    }.width(81)
  }

  build() {
    Scroll() {
      Column() {
        Text("Scroll Area")
          .width("100%")
          .height("40%")
          .backgroundColor('#0080DC')
          .textAlign(TextAlign.Center)
        Column() {
          Tabs({ index :this.selectedIndex,barPosition: BarPosition.Start, controller: this.controller }) {
            ForEach(this.tabs, (item: string, index: number) => {
              TabContent() {
              }.tabBar(this.tabBuilder(index, item))
            })
          }
          .animationMode(AnimationMode.NO_ANIMATION)
          .animationDuration(0)
          .height('auto')
          .onChange((index: number) => {
            // currentIndex控制TabContent显示页签
            if (index==0) {
              this.listScroller.scrollToIndex(0)
            }else if (index==1){
              this.listScroller.scrollToIndex(10)
            }else {
              this.listScroller.scrollToIndex(20)
            }
          })
          List({ space: 10 ,scroller:this.listScroller}) {
            ForEach(this.arr, (item: number) => {
              ListItem() {
                Text("item" + item)
                  .fontSize(16)
              }.listCard()
            }, (item: string) => item)
          }.width("100%")
          .edgeEffect(EdgeEffect.Spring)
          .nestedScroll({
            scrollForward: NestedScrollMode.PARENT_FIRST,
            scrollBackward: NestedScrollMode.SELF_FIRST
          })
          .onScrollIndex((start: number, end: number, center: number) => {
            // if (start<10) {
            //   this.selectedIndex=0;
            // }else if (start>=10&&start<20){
            //   this.selectedIndex=1;
            // }else if (start>=20){
            //   this.selectedIndex=2;
            // }


            //如果条目比较少很容易划回去
            if (center<10  && this.selectedIndex != 0) {
              this.selectedIndex=0;
            }else if (center>=10&&center<20 && this.selectedIndex != 1){
              this.selectedIndex=1;
            }else if (center>=20 && this.selectedIndex != 2){
              this.selectedIndex=2;
            }

          })

        }.height('100%')
        Blank().height(52)
      }.width("100%")
    }
    .edgeEffect(EdgeEffect.None)
    .friction(0.6)
    .backgroundColor('#DCDCDC')
    .scrollBar(BarState.Off)
    .width('100%')
    .height('100%')
  }

}

### 实现微信小程序下拉菜单点击后的吸顶滚动效果 为了实现在微信小程序中,当用户点击某个选项卡时,对应的`<scroll-view>`能自动滚动至顶部并保持固定位置的效果,可以采用如下方法: #### 数据绑定与事件处理 在页面的数据模型中定义一个用于存储导航栏初始距离顶部的位置变量。此操作确保每次加载页面或更新数据后都能重新计算该值。 ```javascript Page({ data: { navbarInitTop: 0 // 导航栏初始化距顶部的距离 }, onLoad() { const that = this; // 当所有接口请求完成且DOM渲染完毕后再执行查询逻辑 setTimeout(() => { if (that.data.navbarInitTop === 0) { wx.createSelectorQuery() .select('#navbar') .boundingClientRect((rect) => { if (rect && rect.top > 0) { let navbarInitTop = parseInt(rect.top); // 减去状态栏高度或其他偏移量 navbarInitTop -= 64; that.setData({ navbarInitTop }); } }) .exec(); } }, 100); // 延迟一段时间等待视图完呈现 }, onTabClick(e) { const index = e.currentTarget.dataset.index; this.scrollToSection(index); }, scrollToSection(index) { this.selectComponent(`#${index}`).scrollTo(0); // 更新当前激活标签的状态 this.setData({ activeIndex: index, }); // 如果需要的话,在这里也可以再次调用获取navbar位置的方法来适应可能的变化 } }); ``` 上述代码片段展示了如何通过监听特定条件下的变化(如网络请求结束),动态调整元素相对于窗口顶端的实际距离[^3]。同时提供了点击事件处理器`onTabClick()`以及辅助函数`scrollToSection()`用来控制同部分之间的平滑过渡和定位。 #### 页面结构布局优化 对于页面样式方面,则需注意设置`.page`, `.swiper-tab`, 和其他相关类别的CSS属性以保证良好的视觉体验。特别是要考虑到各个平台间的差异性和兼容性问题。 ```css /* WXSS */ .page { margin-left: 10rpx; margin-right: 10rpx; } .swiper-tab { display: flex; flex-direction: row; line-height: 80rpx; border-bottom: 2rpx solid #777; } .tab-item { width: 33.3%; text-align: center; font-size: 15px; color: #777; } .on { color: blue; border-bottom: 5rpx solid blue; } ``` 以上样式规则来自实际案例中的配置[^5],可以根据具体需求进一步修改和完善。 #### 使用`<scroll-view>`组件特性 最后,利用`<scroll-view>`自带的功能参数,比如`scroll-top`、`lower-threshold`等,可以帮助更好地管理内容区域内的滚动行为。特别是在涉及到复杂交互场景时,合理运用这些内置功能往往能达到事半功倍的效果。 ```html <!-- WXML --> <view class="container"> <!-- Tab navigation bar --> <view class="swiper-tab"> <block wx:for="{{tabs}}" wx:key="id"> <view id="tab_{{index}}" bindtap="onTabClick" data-index="{{index}}" class="tab-item {{activeIndex==index?'on':''}}"> {{item}} </view> </block> </view> <!-- Content sections wrapped by scroll views --> <block wx:for="{{sections}}" wx:key="id"> <scroll-view id="{{index}}" style="height: calc(100vh - {{navbarInitTop}}px);" scroll-y lower-threshold="50"> <!-- Section content goes here... --> </scroll-view> </block> </view> ``` 这段模板代码说明了怎样构建一个多级嵌套的界面框架,并且巧妙地结合了之前提到的技术要点,实现了预期的目标——即点击底部导航条目时触发相应的内容区向上滚动直至顶部,并维持固定的显示方式[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值