van-tabs 其中的一个tab的内容设置吸顶,则该吸顶的内容在其他标签页(tabs)也出现了

[liuhll]

重现链接

代码如下所示:

<van-tabs sticky animated swipeable active="{{ active }}">
    <van-tab title="全部" name="all" id="all">
        <view class="tab-content">
            <van-sticky offset-top="{{ 44 }}"  container="{{ container }}" wx:if="{{active =='all'}}">
                <van-search  wx:if="{{active =='all'}}" custom-class="search-input" use-action-slot placeholder="请输入搜索关键词" ></van-search>
            </van-sticky>
            <l-card plaintext full title="搜索历史" l-class="search-card" l--title-class="search-card-title">
                <view class="search-card-content">
                    <van-tag class="search-card-tag" color="#f3f3f3" text-color="#666" type="primary">交通事故</van-tag>
                    <van-tag class="search-card-tag" color="#f3f3f3" text-color="#666" type="primary">家庭婚姻</van-tag>
                </view>
            </l-card>
            <l-card plaintext full title="热点问题" l-class="search-card" l--title-class="search-card-title">
                <view class="search-card-content">
                    <van-tag class="search-card-tag" color="#f3f3f3" text-color="#666" type="primary">劳动纠纷</van-tag>
                    <van-tag class="search-card-tag" color="#f3f3f3" text-color="#666" type="primary">欠钱不还</van-tag>
                </view>
            </l-card>
            <qa-list qaList="{{qa.all}}"></qa-list>
        </view>
    </van-tab>
    <van-tab title="我的" name="me">
        <view class="tab-content">
            <qa-list qaList="{{qa.me}}"></qa-list>
        </view>
    </van-tab>
</van-tabs>

Vant Weapp 版本

1.10.19

描述一下你遇到的问题。

希望tabs吸顶,并且第一个标签页的搜索框也吸顶,问题出现在:在第二个tab往下拉的时候,搜索框也会出现

重现步骤

1. 希望在tabs组件内的吸顶组件不要影响其他tab标签页

设备/浏览器

微信小程序

[liuhll]

希望帮忙看一下是啥原因

[johnsonwong666]

提供一个小程序代码片段来看一下。

[liuhll]

提供一个小程序代码片段来看一下。

<van-tabs sticky animated swipeable active="{{ active }}">
    <van-tab title="全部" name="all" id="all">
        <view class="tab-content">
            <van-sticky offset-top="{{ 44 }}"  container="{{ container }}" wx:if="{{active =='all'}}">
                <van-search  wx:if="{{active =='all'}}" custom-class="search-input" use-action-slot placeholder="请输入搜索关键词" ></van-search>
            </van-sticky>
            <l-card plaintext full title="搜索历史" l-class="search-card" l--title-class="search-card-title">
                <view class="search-card-content">
                    <van-tag class="search-card-tag" color="#f3f3f3" text-color="#666" type="primary">交通事故</van-tag>
                    <van-tag class="search-card-tag" color="#f3f3f3" text-color="#666" type="primary">家庭婚姻</van-tag>
                </view>
            </l-card>
            <l-card plaintext full title="热点问题" l-class="search-card" l--title-class="search-card-title">
                <view class="search-card-content">
                    <van-tag class="search-card-tag" color="#f3f3f3" text-color="#666" type="primary">劳动纠纷</van-tag>
                    <van-tag class="search-card-tag" color="#f3f3f3" text-color="#666" type="primary">欠钱不还</van-tag>
                </view>
            </l-card>
            <qa-list qaList="{{qa.all}}"></qa-list>
        </view>
    </van-tab>
    <van-tab title="我的" name="me">
        <view class="tab-content">
            <qa-list qaList="{{qa.me}}"></qa-list>
        </view>
    </van-tab>
</van-tabs>

代码如上所示,tabs标签本身需要吸顶,第一个tab内的搜索框也需要吸顶,奇怪的是在第二个标签页,当页面往下滑动的时候,搜索框就会出现

我现在想到的一个办法就是通过active的值 将tab标签也内吸顶的内容在不需要出现的标签页给隐藏了

[johnsonwong666]

该issue 在vant-weapp2.0 解决

[bebetter1030]

<van-tabs sticky animated swipeable active="{{ active }}">
去掉动画。animated可以解决。