uni-app vue实现向下滑动一定位置，tab固定顶部

最新推荐文章于 2024-06-13 19:39:22 发布
最新推荐文章于 2024-06-13 19:39:22 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： uni vue css 文章标签： js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/B2689429488/article/details/124244926
版权
本文介绍如何在uni-app中利用vue.js，通过监听页面滚动(onPageScroll)来实现在向下滑动到特定位置时，使居中tab始终保持在顶部的置顶效果。
摘要由CSDN通过智能技术生成


将页面居中的tab。向下滑动到一定位置，保持置顶
实现原理：
监听页面滚动（onPageScroll），滚动到一定位置，启动置顶属性isFixed

<view class="sort-product">
	<view :class="{ 'tui-sticky-fixed': isFixed}">  //设置置顶样式，isFixed：默认为false
		<scroll-view scroll-x="true" style="
最低0.47元/天 解锁文章
B2689429488
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app滑到一定距离固定某个元素在顶部，如导航栏等
m0_60141876的博客
07-13 4622
uni-app最近项目有个需求是滑到一定距离固定某个元素在顶部，看到这个需求，大致的思路是首先获取节点信息，然后使用uni-app生命周期中onPageScroll监听滚动，当滚动到元素接近顶部位置时添加class，固定元素，有了这个思路，那我们就来实现代码吧~ html： <template> <view class="content"> <view class="wrap"> <view class="li...
vue+vux页面滚动定位(支持上下滑动)
李古拉雷
04-12 1111
接上篇文章：https://blog.csdn.net/honglei_zh/article/details/88898167 在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚点进行页面dom定位，但是这个demo在ios中运行存在兼容性问题,滑动页面时使用position:absolute定位的dom会出现跳动现象，待有时间再解决这个bug。 好了，...
uni-app 下拉至指定高度固定view
weixin_30414305的博客
10-15 818
uni.createSelectorQuery().select(‘#salyt’).boundingClientRect(function(rects){ console.log(rects) var query = uni.createSelectorQuery() query.select('#main').boundingClientRect() ...
Uniapp实现页面滚动Tab吸顶，点击tab内容滚动到对应tab内容位置
最新发布
weixin_47342624的博客
06-13 673
data() {return {curTab: 0,tabTop: 0, // tab距离顶部的距离},name: '正文详情',}]name: '相关附件',})name: '图文解读',})},// 点击tab滚动事件if(!0 : (data?},// uni页面滚动监听事件// 获取tabs的距离顶部的距离}).exec();},
uni-app顶部导航栏 下拉滑动固定到屏幕顶部
小猫爪子
11-24 3884
示例图片 代码 <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
uniapp 微信小程序 ui-table 表头固定，可缩放，实现
热门推荐
qq_36958916的博客
06-09 1万+
uni-table表头固定，可缩放效果用到的组件： 使用uniapp内置组件 movable-view和movable-area实现表格缩放 使用uni-table 实现表格渲染（自带多选，没有头固定功能）。可是我想偷懒，并且现在情况就是我不偷懒尝试去实现......
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
uni-preset-vue:vue的uni-app预设
04-29
uni-preset-vue是uni-app针对Vue.js的一个重要组成部分，它是基于vue-cli的uni-app预设配置，旨在简化uni-app项目初始化过程，为开发者提供更加便捷的开发环境。 【描述】：“@ uni-app / vue-cli-preset-uni-app ...
uni-preset-vue-master uniapp项目模板
12-02
《uni-preset-vue-master：基于uni-app的高效开发模板详解》 在移动应用开发领域，uni-app作为一款跨平台的开发框架，以其强大的兼容性和灵活性受到广泛关注。uni-preset-vue-master则是一个专为uni-app量身定制的...
基于Javascript的uni-app Vue预设设计源码
05-25
本源码为基于Javascript的uni-app Vue预设设计，包含228个JavaScript文件、136个JSON文件等，共408个文件。该项目旨在为用户提供一个全面、便捷的uni-app Vue预设解决方案，通过Javascript、TypeScript、HTML、Vue...
基于Vue和Javascript的uni-app简约小程序前端设计源码
04-15
基于Vue和Javascript的uni-app简约小程序前端设计源码，该项目包含316个文件，主要...该项目是一个基于Vue和Javascript的uni-app简约小程序前端设计源码，可能涉及用户界面设计、应用逻辑实现、数据存储等多个方面。
uniapp 设置div块内可上下滑动
m0_61205772的博客
03-20 394
只需要加一段即可。
vue 滑动置顶功能_CSS3 移动端 滚动置顶 吸顶
weixin_39608118的博客
12-19 1267
如果是在回调里置顶DIV的话(比如点击事件)，可以用scrollIntoView。CSS3滚动置顶目前有两种解决方案：第一种(主流)：transform: translate3d(x,y,z)第二种(未来)：position: sticky;top:xxx;假设需求：image.png需求一：滚动过程中A ,C区域不吸顶，B区域吸顶VUE框架推荐直接使用vantUI插件,indexbar索引栏。h...
vue 滑动置顶功能_Vue 置顶组件FixedTopWrap 支持自定义内容置顶
weixin_30990387的博客
12-29 954
背景最近项目在实现置顶功能时，由于原使用的双标签替换实现存在状态不一致的问题，所以考虑仅用单标签实现，避免状态问题。同时由于多处使用，所以简单实现了这一组件。使用上只要像一样包裹需要被置顶的内容即可。效果image使用示例置顶内容...import FixedTopWrap from '@/components/FixedTopWrap';export default {data() {retur...
uniapp 右侧滑动左侧自动定位到相应模块
qq_42176747的博客
12-10 1613
适应各种手机的右侧滑动，左侧能自动定位到相应位置 项目开发中，需要手机左侧是模块名称，右侧是所有模块的展示，右侧可滑动，滑动到另一个模块时，左侧能自动激活到相应模块 主要使用scroll-view，@scroll，scrill-into-view。 html代码 //左侧常规写，声明一个变量控制样式激活状态 //右侧 <scroll-view class="scroll" scroll-y="true" :scroll-into-view="scrollViewId" @scroll="onS
uniapp自定义顶部tabbar
m0_67388537的博客
07-17 470
【代码】uniapp自定义顶部tabbar。
uniapp 顶部固定 下部滑动
az44yao的专栏
07-03 1943
方法1 方法二
uniapp小程序固定tab 下半部分滚动加载数据
sdad2154的博客
06-22 291
主要看底部css调整 效果图如下
uni-app vue3
07-27
对于uni-app和Vue 3的结合，目前官方还没有正式支持Vue 3的版本。uni-app目前主要是基于Vue 2的版本进行开发的。但是，你可以使用uni-app的2.x版本结合Vue 3的语法进行开发，只是在某些特性上可能会有一些限制。 如果你希望使用Vue 3进行uni-app开发，可以考虑使用Vue 3自带的Composition API来进行开发。Composition API是Vue 3中引入的一种新的组织逻辑的方式，相比于Vue 2中的Options API，Composition API更加灵活和可复用。 要在uni-app中使用Vue 3的Composition API，你需要先安装@vue/composition-api库。然后，在你的uni-app项目中引入该库，并且按照Vue 3的方式来使用Composition API编写代码。 需要注意的是，由于uni-app并未官方支持Vue 3，所以在使用Composition API时可能会遇到一些兼容性问题或者功能上的限制。在使用过程中，建议查阅uni-app和@vue/composition-api的文档，以便更好地理解如何结合使用它们。 希望这个回答能够帮到你！如果你还有其他问题，可以继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值