- 发布:2022-05-16 11:12
- 更新:2022-05-17 19:30
- 阅读:430
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.4.7
手机系统: 全部
手机厂商: 华为
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
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>
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>
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 的子组件 header 期待 和list 的子组件header 一样页面滚动到顶部的时候可以有吸顶效果
实际结果:
nvue 情况下 waterfall 的子组件 hedaer 页面滚动到顶部的时候并没有达到文档所说的吸顶
nvue 情况下 waterfall 的子组件 hedaer 页面滚动到顶部的时候并没有达到文档所说的吸顶
bug描述:
waterfall 字组件 页面滚动时 <header></header>没有吸顶
小枫叶 - 外包接单加v:wlmk1234567 注明来意
有一个swiper-list的案例 你试过么
https://ext.dcloud.net.cn/plugin?id=2128 看看这个组件能正常不
3***@qq.com (作者)
已用position: sticky;解决了。
2022-05-23 08:51