uni-app 导航栏滚动后固定到顶部

最新推荐文章于 2024-08-30 20:05:23 发布
最新推荐文章于 2024-08-30 20:05:23 发布
阅读量2.9k 收藏 8
点赞数 1
文章标签： javascript 前端 vue.js 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59795720/article/details/125003839
版权
本文详细介绍了如何在uni-app中实现导航栏在页面滚动后自动固定到顶部的功能，利用JavaScript和Vue.js的特性，结合小程序的API，为用户提供了更好的浏览体验。
摘要由CSDN通过智能技术生成

完整代码

 <template>
    <view class="content">
        <view class="wrap">
            <view class="list" v-for="i in list_data">
                <text>{
  { i }}</text>
            </view>
        </view>
        <view class="switchSign"></view>
        <view class="tagTop" :class="{'topfixed-active':topfixed==1}">固定在顶部</view>
        <view class="wrap" :class="{'paTop80':topfixed==1}">
            <view class="list" v-for="i in list_data_new">
                <text>{
  { i }}</text>
            </view>
        </v
最低0.47元/天 解锁文章
xuanlele
关注
uni-app - 将元素固定在顶部且下拉页面不会露出顶部空白（强吸顶）
王佳斌
12-24 9550
前言 如果普通的方式固定住，刷新页面动作(下拉页面)会在顶部出现空白块。 有时候，我们需要将一个元素 “牢固” 定在一个位置，无论页面怎么上拉下滑，都不会偏移或露出顶部安全距离。 实现 给最外层父容器加上以下 css 代码即可。 view { position: fixed; left: 0; right: 0; top: 0; } ...
uni-app 导航栏吸顶
m0_46701899的博客
03-08 964
部分代码 <template> <view> <view class="status_bar"></view> <view class="demoWrapperNavTop"> <view class="h-100"> <gonds-header-search></gonds-header-search> </view> </view&gt...
uni-app顶部导航条固定
小夏同学呀
01-08 1453
2.给父容器page设置高度为100%，完全撑开，开启并flex弹性盒，给滚动容器设值flex值为1。滚动容器，包裹需要滚动的区域。
关于uniapp滚动吸顶效果
最新发布
ugbbfjk的博客
08-30 321
这里是一个两次scroll-view嵌套的效果，内层是滚动列表，首先是关闭内层滚动状态，先滚动外层，当外层滚动高度超过指定高度后，更改头部自定义导航栏样式及状态等，再将需要固定在顶部的元素设置固定定位，再打开内层滚动状态，实现吸顶后再滚动列表。
uniapp导航栏滚动到顶部后固定
qq_42786138的博客
05-14 757
<template> <view class="main"> <view class="hand" ref='handHeight'> <!-- 内容块 --> </view> <view class="nav" :class="flag?'fixed':''"> <view class="dataInfo"> <view class="list"> <text.
uniapp自定义头部导航栏在页面整体滚动时固定在顶部
PolarisWay的博客
07-03 1095
在uniapp中，使用uni-nav-bar组件定义自定义头部导航栏，但是在页面超出时，会带着头部导航栏一起滚动，以下代码实现头部导航栏固定在顶部，剩余内容正常滚动。
uni-app小程序滑动到顶部固定
wendyNo的博客
04-26 1495
<view class="performance-type-lists" :class="className"> <view> <view>简介</view> <view></view> </view> <view> <view>须知</view> <view></view> </view> <view> &lt
uni-app顶部导航栏 下拉滑动固定到屏幕顶部
小猫爪子
11-24 3970
示例图片 代码 <template> <view style="display: flex;flex: row; position:fixed; left: 0; width: 100%; top: 30;z-index: 999;"> <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft"> <view class="cu-i
导航栏滚动到顶部后固定
07-16
在网页设计中，"导航栏滚动到顶部后固定"是一种常见的用户体验优化技术，它被称为Fixed Navigation或Sticky Navbar。这种设计使得用户在浏览长页面时，无论页面如何滚动，导航栏始终保持在屏幕顶部，便于用户随时...
uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪
05-19
"uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪"这个主题关注的是如何在移动应用中实现平滑的下拉加载功能，同时避免页面在加载新内容时出现闪烁现象，确保用户在查看聊天历史时能有流畅的交互体验。...
uni-app滑到一定距离固定某个元素在顶部，如导航栏等
m0_60141876的博客
07-13 4729
uni-app最近项目有个需求是滑到一定距离固定某个元素在顶部，看到这个需求，大致的思路是首先获取节点信息，然后使用uni-app生命周期中onPageScroll监听滚动，当滚动到元素接近顶部位置时添加class，固定元素，有了这个思路，那我们就来实现代码吧~ html： <template> <view class="content"> <view class="wrap"> <view class="li...
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
12-13
最近一直在学习uni-app开发，由于uniapp是基于vue.js技术开发的，只要你熟悉vue，基本上很快就能上手了。 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意 目前暂支持H5、App端，不支持小程序。 在page.json里配置app-plus即可 { "path": "pages/ucenter/index", "style": { "navigationBarTitleT
uniapp滑动到一定的高度后固定某个元素到顶部效果demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-06 1063
uniapp滑动到一定的高度后固定某个元素到顶部效果demo
uniapp自定义导航栏固定顶部，滚动时样式变化
weixin_41521961的博客
04-23 520
【代码】uniapp自定义导航栏固定顶部，滚动时样式变化。
uniapp 固定顶部元素且保持占位
qq_20236937的博客
05-22 1095
如果普通的方式固定住，刷新页面动作(下拉页面)会在顶部出现空白块。有时候，我们需要将一个元素 “牢固” 定在一个位置，无论页面怎么上拉下滑，都不会偏移或露出顶部安全距离。
小程序 页面移动到指定位置将导航栏固定(uniapp)
JunVei的博客
09-23 3253
页面移动到指定位置，将导航栏固定
uni-app 滑到一定位置固定某个元素在顶部 吸顶解决方案 APP端 H5端
织网的博客
08-26 6121
uni-app 滑到一定位置固定某个元素在顶部 <template> <view class="content"> <view style="width: 100%; height: 200rpx; border: red solid 1rpx;">导航栏上面内容</view> <view class="switchSign"></view> <view class="tagTop" :class="{ 'topfi
uniapp控制滚动条固定滚动状态栏保持不动
weixin_73332666的博客
02-11 1129
uniapp控制滚动条
顶部tabs栏固定及动态切换tabs栏——uniapp
m0_72929120的博客
08-30 618
【代码】顶部tabs栏固定及动态切换tabs栏——uniapp。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值