uni-app 顶部选项卡吸附效果

已于 2022-05-27 16:39:06 修改
阅读量5.1k 收藏 32
点赞数 6
分类专栏： uniapp tab选项卡 文章标签： vue.js 前端 小程序
于 2022-05-27 15:45:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59795720/article/details/125004913
版权
这篇博客介绍了如何在uni-app中实现顶部选项卡的吸附效果，当页面滚动到特定位置时，选项卡会吸顶。同时，选项卡部分还支持滑动切换页面。开发者需要注意，动态绑定的style属性不支持直接使用upx单位，需要通过uni.upx2px转换为px。内容包括html结构、JavaScript逻辑以及CSS样式，适合uni-app和Vue.js的前端开发者参考。
摘要由CSDN通过智能技术生成

1、页面滚动到该导航位置吸顶

2、tab部分可滑动切换页面

html部分

banner图

 <view class="ding">banner</view>

tab选项卡、滑动

<view :class="{'st':true,'sticky-fixed':isF}">
			<!-- tab部分 -->
			<swiper class="ct_tab">
				<swiper-item  :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index" class="ct_item"  @click="clickCtTab(index)">
					<text  v-text="item.title"></text>
				</swiper-item>
			</swiper>
		</view>

展示内容部分，根据选项卡下标进行展示

<view class="xiala">
			<!-- 内容信息 -->
			<view v-if="tabCur===0">
				<view>全部信息</view>
				<view>111111111111111111111111111</view>
				<view>222222222222222222222222222</view>
				<view>333333333333333333333333333</view>
			</view>
			<view v-if="tabCur===1">
				<view>水果</view>
				<view>111111111111111111111111111</view>
				<view>222222222222222222222222222</view>
				<view>333333333333333333333333333</view>
			</view>
			<view v-if="tabCur===2">
				<view>蔬菜</view>
			</view>
			<view v-if="tabCur===3">
				<view>调味品</view>
			&
最低0.47元/天 解锁文章
xuanlele
关注
专栏目录
uni-app吸顶效果
Ylk_manong的博客
08-02 478
uni-app吸顶效果 <view class="sticky"> <my-tabs :tabs="tabs" :defaultIndex="defaultIndex" @tabClick="tabClick"/> </view> .sticky{ position: -webkit-sticky; position: sticky; z-index: 999; top: 0; /* #ifdef H5 */ top: 44px; /* #endif *
uniapp实现吸顶，吸底
04-23
uniapp实现吸顶，吸底 通过createSelectorQuery方法监听，提高性能
uni-app功能 1. 实现点击置顶，滚动吸顶2.swiper一个轮播显示一个半内容且实现无缝滚动3.穿透修改uni-ui的样式
最新发布
chengcheng9876的博客
09-20 909
uni-app功能 1. 实现点击置顶，滚动吸顶2.swiper一个轮播显示一个半内容且实现无缝滚动3.穿透修改uni-ui的样式
uni-app 吸顶方案总结
qq_39211165的博客
08-13 1335
queryreturnscrollTop: pageScrollTop, //滚动的距离duration: 10 //过渡时间})}).exec()微信是支持offsetTop配置的，但是不知道为什么uni中未生效不然可以写成下边的样子});
关于uniapp滚动吸顶效果
ugbbfjk的博客
08-30 245
这里是一个两次scroll-view嵌套的效果，内层是滚动列表，首先是关闭内层滚动状态，先滚动外层，当外层滚动高度超过指定高度后，更改头部自定义导航栏样式及状态等，再将需要固定在顶部的元素设置固定定位，再打开内层滚动状态，实现吸顶后再滚动列表。
uniapp css吸顶效果
vv110x的博客
03-08 794
//给需要吸顶的加这个样式 .sticky{ /* #ifndef APP-PLUS-NVUE */ display: flex; position: -webkit-sticky; /* #endif */ position: sticky; //top: var(--window-top); top: 0rpx;//距离为0的时候吸顶 z-index: 99; }
Uniapp实现页面滚动Tab吸顶，点击tab内容滚动到对应tab内容位置
weixin_47342624的博客
06-13 1071
data() {return {curTab: 0,tabTop: 0, // tab距离顶部的距离},name: '正文详情',}]name: '相关附件',})name: '图文解读',})},// 点击tab滚动事件if(!0 : (data?},// uni页面滚动监听事件// 获取tabs的距离顶部的距离}).exec();},
Uniapp中实现一个吸顶效果
weixin_52508886的博客
03-13 2110
uniapp吸顶
uni-app 吸顶
m0_68559944的博客
11-08 349
在页面滚动过程中常常要求实现某个节点能固定在距离页面顶部的某个位置，我们称这种效果为吸顶，为了方便以后重复使用吸顶的效果，我们来封装一个组件，核心实现思路为组件插槽。这种处理方式虽不是很优雅，但相对算是比较高效的方式了，省去了监听滚动的事件，3.允许自定义距离顶部的距离和组件的背景颜色，通过自定义属性方式传入数据。组件默认情况间距变大，为了解决这个问题我们采取这样一个技巧，通过 为。，原因是这样可以避免刘海屏或灵动岛部分无法被覆盖的情况。在设置吸顶距离时使用的是。
uniapp吸顶功能实现
我行我素的博客
09-09 5305
一、vue页面代码实现 <view :class="[(isFixedTop) ? 'fixedTop' : '']" id="box" class="box bgwhite"> <view class="m-lr-30 row just-btw p-tb-30"> <view class="row alignitems"> <image src="../../static/quanbu_icon.png" mode="aspectFit" style=
uniapp实现吸顶效果、滚动吸顶（分类、筛选、排序、搜索等滚动到顶部自动固定、吸顶）
热门推荐
HuafuCsdn的博客
02-25 1万+
最简单的实现思路有两种： 1.监听滚动距离，当类目滚动到预期范围内时，设置一个特殊的样式，使其脱离文档流固定定位在顶部。 2.不去影响页面中的类目，而是在顶部预先放一个一模一样的类目，预先隐藏，通过监听滚动距离，在适当的时候控制其展示。 两种思路实现都可以，本人跟倾向于第二种实现，因为第二种不会影响原来的页面布局，也更好控制 布局比较简单，不做赘述，在这里简单分享一下uniapp中如何监听滚动获取目标元素位置及配合控制目标显隐，uni.createSelectorQuery()可以创建一个选择器..
uni-app 封装一个顶部选项卡组件
04-24
uni-app 封装一个顶部选项卡组件
uni-app开发介绍PPT
08-12
"uni-app开发介绍" uni-app是一款使用Vue.js开发所有前端应用的框架，开发者可以编写一套代码，并将其发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip
12-17
"uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip" 是一个针对uni-app框架的项目，其核心功能是实现自定义底部导航栏。uni-app是一个多端开发框架，允许开发者使用一套代码生成包括iOS、Android、H5...
uni-app 顶部选项卡吸附效果 demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
08-02 506
uni-app 顶部选项卡吸附效果 demo
uniapp 吸顶
weixin_59727199的博客
11-20 614
【代码】uniapp 吸顶。
uni-app内置选项卡切换
11-11
以下是uni-app内置选项卡切换的示例代码： ```html <template> <view> <view class="nav"> <view v-for="(item, index) in navList" :key="index" :class="['nav-item', navIndex === index ? 'active' : '']" @click="checkIndex(index)"> {{ item }} </view> </view> <view class="list"> <view v-for="(item, index) in listData[navIndex]" :key="index" :class="['list-item', listIndex === index ? 'active' : '']" @click="checkListIndex(index)"> {{ item }} </view> </view> </view> </template> <script> export default { data() { return { navIndex: 0, navList: ["选项卡一", "选项卡二"], listIndex: 0, listData: [ ["选项卡一-1", "选项卡一-2", "选项卡一-3"], ["选项卡二-1", "选项卡二-2", "选项卡二-3"] ] }; }, methods: { checkIndex(index) { this.navIndex = index; this.listIndex = 0; }, checkListIndex(index) { this.listIndex = index; } } }; </script> <style> .nav { display: flex; justify-content: space-around; background-color: #f5f5f5; height: 100rpx; line-height: 100rpx; } .nav-item { font-size: 32rpx; color: #666; } .nav-item.active { color: #007aff; } .list { display: flex; justify-content: space-around; background-color: #fff; height: 400rpx; line-height: 400rpx; } .list-item { font-size: 32rpx; color: #666; } .list-item.active { color: #007aff; } </style> ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值