uni-app nvue waterfall 子组件 <header></header>没有吸顶
uni-app nvue waterfall 子组件
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10 | HBuilderX |
产品分类：uniapp/App
测试过的手机：小米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 页面滚动到顶部的时候并没有达到文档所说的吸顶
更多关于uni-app nvue waterfall 子组件 <header></header>没有吸顶的实战教程也可以访问 https://www.itying.com/category-93-b0.html
5 回复
有一个swiper-list的案例 你试过么
https://ext.dcloud.net.cn/plugin?id=2128 看看这个组件能正常不
更多关于uni-app nvue waterfall 子组件 <header></header>没有吸顶的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 uni-app 中使用 nvue 开发时，如果你想要实现 header 吸顶效果，可以使用 position: sticky 来实现。不过，nvue 的样式和布局机制与传统的 web 开发有所不同，因此需要特别注意。
以下是一个简单的示例，展示如何在 nvue 中实现吸顶效果：
<template>
<view class="container">
<view class="header" :style="{ position: headerSticky ? 'sticky' : 'relative', top: '0' }">
<!-- Header content -->
<text>Header</text>
</view>
<waterfall>
<!-- Waterfall content -->
<view v-for="(item, index) in items" :key="index" class="item">
<text>{{ item }}</text>
</view>
</waterfall>
</view>
</template>
<script>
export default {
data() {
return {
headerSticky: true,
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
};
}
};
</script>
<style scoped>
.container {
flex: 1;
}
.header {
height: 50px;
background-color: #f0f0f0;
justify-content: center;
align-items: center;
}
.item {
height: 100px;
margin: 10px;
background-color: #e0e0e0;
justify-content: center;
align-items: center;
}
</style>