3***@qq.com
3***@qq.com
  • 发布:2022-05-16 11:12
  • 更新:2022-05-17 19:30
  • 阅读:430

【报Bug】nvue waterfall 子组件 <header></header>没有吸顶

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.4.7

手机系统: 全部

手机厂商: 华为

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

小米10 pro MIUI12.5.10; iPhone 7Plus

示例代码:

hello 案例源码

<template>  
    <list :id="pageId" class="page" :bounce="false" fixFreezing="true">  
        <cell>  
            <view id="head" class="header">  
                <text class="header-title">header</text>  
            </view>  
        </cell>  
        <cell>  
            <view class="tabs" :style="'height:' + pageHeight + 'px'">  
                <scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="true"  
                    :show-scrollbar="false" :scroll-into-view="scrollInto">  
                    <view style="flex-direction: column;">  
                        <view style="flex-direction: row;">  
                            <view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" :ref="'tabitem'+index"  
                                :data-id="index" :data-current="index" @click="ontabtap">  
                                <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>  
                            </view>  
                        </view>  
                        <view class="scroll-view-indicator">  
                            <view ref="underline" class="scroll-view-underline" :class="isTap ? 'scroll-view-animation':''"  
                                :style="{left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px'}"></view>  
                        </view>  
                    </view>  
                </scroll-view>  
                <view class="tab-bar-line"></view>  
                <swiper class="tab-view" ref="swiper1" id="tab-bar-view" :current="tabIndex" :duration="300" @change="onswiperchange"  
                    @transition="onswiperscroll" @animationfinish="animationfinish" @onAnimationEnd="animationfinish">  
                    <swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index">  
                        <swiper-page class="swiper-page" :pid="page.pageid" :parentId="pageId" ref="page"></swiper-page>  
                    </swiper-item>  
                </swiper>  
            </view>  
        </cell>  
    </list>  
</template>

swiper-page 组件(案例源代码)

<template>  
    <view class="uni-swiper-page">  
        <listref="list" class="list" :offset-accuracy="5" :bounce="false" fixFreezing="true" :headerHeight='50'>  
            <header > <text>吸顶效果</text> </header>  
            <cell v-for="(item, index) in dataList" :key="item.id" :ref="'item'+index">  
                <view class="list-item">  
                    <text>{{item.name}}</text>  
                </view>  
            </cell>  
            <cell class="loading"></cell>  
        </list>  
    </view>  
</template>

操作步骤:

hello 案例源码 ,实际项目也是根据这个案例来写的

<template>  
    <list :id="pageId" class="page" :bounce="false" fixFreezing="true">  
        <cell>  
            <view id="head" class="header">  
                <text class="header-title">header</text>  
            </view>  
        </cell>  
        <cell>  
            <view class="tabs" :style="'height:' + pageHeight + 'px'">  
                <scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="true"  
                    :show-scrollbar="false" :scroll-into-view="scrollInto">  
                    <view style="flex-direction: column;">  
                        <view style="flex-direction: row;">  
                            <view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" :ref="'tabitem'+index"  
                                :data-id="index" :data-current="index" @click="ontabtap">  
                                <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>  
                            </view>  
                        </view>  
                        <view class="scroll-view-indicator">  
                            <view ref="underline" class="scroll-view-underline" :class="isTap ? 'scroll-view-animation':''"  
                                :style="{left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px'}"></view>  
                        </view>  
                    </view>  
                </scroll-view>  
                <view class="tab-bar-line"></view>  
                <swiper class="tab-view" ref="swiper1" id="tab-bar-view" :current="tabIndex" :duration="300" @change="onswiperchange"  
                    @transition="onswiperscroll" @animationfinish="animationfinish" @onAnimationEnd="animationfinish">  
                    <swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index">  
                        <swiper-page class="swiper-page" :pid="page.pageid" :parentId="pageId" ref="page"></swiper-page>  
                    </swiper-item>  
                </swiper>  
            </view>  
        </cell>  
    </list>  
</template>

hello 案例源代码 把list 改成了 waterfall

<template>  
    <view class="uni-swiper-page">  
        <waterfall ref="list" class="list" :offset-accuracy="5" :bounce="false" fixFreezing="true" :headerHeight='50'>  
            <header > <text>吸顶效果</text> </header>  
            <cell v-for="(item, index) in dataList" :key="item.id" :ref="'item'+index">  
                <view class="list-item">  
                    <text>{{item.name}}</text>  
                </view>  
            </cell>  
            <cell class="loading"></cell>  
        </waterfall>  
    </view>  
</template>

预期结果:

nvue 情况下 waterfall 的子组件 header 期待 和list 的子组件header 一样页面滚动到顶部的时候可以有吸顶效果

实际结果:

nvue 情况下 waterfall 的子组件 hedaer 页面滚动到顶部的时候并没有达到文档所说的吸顶

bug描述:

waterfall 字组件 页面滚动时 <header></header>没有吸顶

2022-05-16 11:12 负责人:无 分享
已邀请:
小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

  • 3***@qq.com (作者)

    已用position: sticky;解决了。

    2022-05-23 08:51

DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

list嵌套问题暂没有适配waterfall

  • 3***@qq.com (作者)

    已用position: sticky;解决了。

    2022-05-23 08:52

该问题目前已经被锁定, 无法添加新回复