[youzan/vant-weapp][Bug Report] 自己封装了scroll-view实现了上拉加载下拉更新的功能,在里面嵌套了van-tabs,设置了sticky无效。

2024-02-20 847 views
9
重现链接

image image

Vant Weapp 版本

1.0.14

描述一下你遇到的问题。

自己封装了scroll-view实现了上拉加载下拉更新的功能,在里面嵌套了van-tabs,设置了sticky无效。

重现步骤

1.整个页面滑动,当滑动到tabs时,sticky固定不了。

设备/浏览器

No response

回答

1

可以参考van-sticky组件在scrollview组件里面的使用。 可能的原因是scroll-view组件开启refresh容器高度变了造成sticky失效

9
4760 4922
1

可以提供一个复现代码片段过来吗?

2

我也遇到了, 文档提供的代码无效

<scroll-view scroll-y enable-back-to-top refresher-enabled refresher-triggered="{{refresherTriggered}}" bindrefresherrefresh="onPullDownRefresh" bind:scroll="onScroll" style="height: 100vh;">
  <van-sticky scroll-top="{{ scrollTop }}">
    <van-tabs title-active-color="#F04034" line-width="4em" value="{{tabActive}}" bind:change="tabChange">
      <van-tab title="自购订单" name="myOrder"></van-tab>
      <van-tab title="售卖订单" name="myGroupOrder"></van-tab>
    </van-tabs>
    <van-search shape="round" model:value="{{searchValue}}" placeholder="团购名" use-action-slot bind:search="search">
      <view slot="action" style="padding: 0 12px;" bind:tap="filter">
        <text style="margin-right:3px;">筛选</text>
        <van-icon name="filter-o" dot="{{hasFilter}}" />
      </view>
    </van-search>
  </van-sticky>
  <view class="container" style="margin-top:15px;">
    <block wx:for="{{listData}}" wx:key="orderId">
      <template is="item" data="{{ data:item }}" />
    </block>
    <empty-block description="暂无订单" wx:if="{{listData.length === 0}}" />
  </view>
</scroll-view>
onScroll(event: WXEvent) {
    this.setData({
      scrollTop: event.detail.scrollTop
    });
  },
9

该issue 在vant-weapp2.0 解决

7

补充一点。实测下来,scroll-view 里面开启下拉刷新 里面的元素的postion会无效 不管是fixed/还是sticky 这可能是官方的一个bug,社区也有讨论,如有这种场景尝试页面级别的下拉刷新。

image
6

这样写试试 scroll-view里面再嵌套一层view `

//内容 `