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

已于 2022-05-27 16:39:06 修改
阅读量4.8k 收藏 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
版权

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>
			</view>
			<view v-if="tabCur===4">
				<view>肉类</view>
			</view>
			<view v-if="tabCur===5">
				<view>油类</view>
			</view>
			<view v-if="tabCur===6">
				<view>米类</view>
			</view>
			<view v-if="tabCur===7">
				<view>海鲜</view>
			</view>
					
		</view>

JavaScript部分

注意事项：动态绑定的 style 不支持直接使用 upx，使用时需要使用 uni.upx2px(Number) 转换为 px 后再赋值

<script>
    export default {
        data() {
            return {
				// 下拉固定
                yuanH: uni.upx2px(200),
                isF: false,
				// 滑动tab
				tabCur:0,
				tabList:[
					{
						title:'全部',
					},{
						title:'水果',
					},{
						title:'蔬菜',
					},{
						title:'调味品',
					},{
						title:'肉类',
					},{
						title:'油类',
					},{
						title:'米类',
					},{
						title:'海鲜',
					}
				],
				
            };
        },
        onPageScroll(e) {
            //#ifdef H5
            this.isF = true
            // #endif
            // #ifndef H5
            if (this.yuanH > e.scrollTop) {
                this.isF = false
            } else {
                this.isF = true
            }
            // #endif
        },
		methods:{
			clickCtTab(ctCur){
				this.tabCur = ctCur
				console.log('点击了--->'+this.tabCur)
			}
		},
		
    };
</script>

CSS部分

<style lang='scss' scoped>
	/* 顶部 banner */
    .ding {
        height: 200rpx;
        background-color: aquamarine;
    }

    .st {
        height: 90rpx;
        width: 750rpx;
        background-color: #fff;
        z-index: 999;
        /* top: 300upx; */
    }
    .sticky-fixed {
        /* #ifdef H5 */
        position: sticky;
        top: 44px;
        /* #endif */
        /* #ifndef H5 */
        position: fixed;
        top: 0;
        /* #endif */
        z-index: 999;
    }
    .xiala {
        height: 1500px;
        background-color: #eee;
        padding-top: 100rpx;
    }
	
	
	/* 滑动tab */
	.ct_tab{
		width: 698upx;
		height: 90rpx;
		margin: 0 auto;
		/* padding: 30upx 0; */
		font-size: 28upx;
		/* font-weight: bold; */
		color: #c0c8d0;
		white-space: nowrap;
		display: flex;
		overflow: hidden;
	}
	.ct_item{
		width: 150upx;    
		padding: 20upx 0;
		display: inline-block;
	}
	.ct_item text{
		padding: 20upx 0;
	}
	.ct_active{
		color:#007AFF;
		font-weight: bold;
	}
	.ct_active text{
		border-bottom: 2px solid #007AFF;
	}
	swiper{
		width:100%;
	}
	
	swiper-item{
		width: 150upx !important;
	}
	
</style>

完整代码

<template>
    <view>
		<!-- 顶部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>
			</view>
			<view v-if="tabCur===4">
				<view>肉类</view>
			</view>
			<view v-if="tabCur===5">
				<view>油类</view>
			</view>
			<view v-if="tabCur===6">
				<view>米类</view>
			</view>
			<view v-if="tabCur===7">
				<view>海鲜</view>
			</view>
					
		</view>
		
    </view>
</template>

<script>
    export default {
        data() {
            return {
				// 下拉固定
                yuanH: uni.upx2px(200),
                isF: false,
				// 滑动tab
				tabCur:0,
				tabList:[
					{
						title:'全部',
					},{
						title:'水果',
					},{
						title:'蔬菜',
					},{
						title:'调味品',
					},{
						title:'肉类',
					},{
						title:'油类',
					},{
						title:'米类',
					},{
						title:'海鲜',
					}
				],
				
            };
        },
        onPageScroll(e) {
            //#ifdef H5
            this.isF = true
            // #endif
            // #ifndef H5
            if (this.yuanH > e.scrollTop) {
                this.isF = false
            } else {
                this.isF = true
            }
            // #endif
        },
		methods:{
			clickCtTab(ctCur){
				this.tabCur = ctCur
				console.log('点击了--->'+this.tabCur)
			}
		},
		
    };
</script>
<style lang='scss' scoped>
	/* 顶部 banner */
    .ding {
        height: 200rpx;
        background-color: aquamarine;
    }

    .st {
        height: 90rpx;
        width: 750rpx;
        background-color: #fff;
        z-index: 999;
        /* top: 300upx; */
    }
    .sticky-fixed {
        /* #ifdef H5 */
        position: sticky;
        top: 44px;
        /* #endif */
        /* #ifndef H5 */
        position: fixed;
        top: 0;
        /* #endif */
        z-index: 999;
    }
    .xiala {
        height: 1500px;
        background-color: #eee;
        padding-top: 100rpx;
    }
	
	
	/* 滑动tab */
	.ct_tab{
		width: 698upx;
		height: 90rpx;
		margin: 0 auto;
		/* padding: 30upx 0; */
		font-size: 28upx;
		/* font-weight: bold; */
		color: #c0c8d0;
		white-space: nowrap;
		display: flex;
		overflow: hidden;
	}
	.ct_item{
		width: 150upx;    
		padding: 20upx 0;
		display: inline-block;
	}
	.ct_item text{
		padding: 20upx 0;
	}
	.ct_active{
		color:#007AFF;
		font-weight: bold;
	}
	.ct_active text{
		border-bottom: 2px solid #007AFF;
	}
	swiper{
		width:100%;
	}
	
	swiper-item{
		width: 150upx !important;
	}
	
</style>

写得不好请多多包涵（狗头保命）>_<

xuanlele
关注
  • 6
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
uniapp实现吸顶，吸底
04-23
uniapp实现吸顶，吸底 通过createSelectorQuery方法监听，提高性能
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uniapp吸顶功能实现
我行我素的博客
09-09 5073
一、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吸顶以及点击选项卡滚动到当页的指定位置
最新发布
weixin_48730003的博客
03-26 630
uniapp吸顶以及点击选项卡滚动到当页的指定位置
Uniapp中实现一个吸顶效果
weixin_52508886的博客
03-13 1880
uniapp吸顶
uniapp实现吸顶效果、滚动吸顶（分类、筛选、排序、搜索等滚动到顶部自动固定、吸顶）
热门推荐
HuafuCsdn的博客
02-25 1万+
最简单的实现思路有两种： 1.监听滚动距离，当类目滚动到预期范围内时，设置一个特殊的样式，使其脱离文档流固定定位在顶部。 2.不去影响页面中的类目，而是在顶部预先放一个一模一样的类目，预先隐藏，通过监听滚动距离，在适当的时候控制其展示。 两种思路实现都可以，本人跟倾向于第二种实现，因为第二种不会影响原来的页面布局，也更好控制 布局比较简单，不做赘述，在这里简单分享一下uniapp中如何监听滚动获取目标元素位置及配合控制目标显隐，uni.createSelectorQuery()可以创建一个选择器..
uniapp小程序专栏三：吸顶
wyh_115的博客
11-03 553
在用户浏览的时候，会要求吸顶样式，其实就是监听滚动条离顶部一定距离就改变样式 <view class="supply-all" :class="{'sticky-fixed':isF}"></view> js代码 onPageScroll(e) { this.isF = false if ( e.scrollTop < 200) { this.isF = false } else { this.isF = true } },
uniapp 吸顶
weixin_59727199的博客
11-20 363
【代码】uniapp 吸顶。
uniapp元素吸底和吸顶效果
weixin_52601258的博客
05-03 2907
元素固定在底部效果 .addLog{ position: fixed; right: 20px; bottom: calc( var(--window-bottom) + 20px); z-index: 1030; margin-bottom: 6; } 元素吸顶效果 .top{ background-color: #f1f1f1; position: -webkit-sticky; position: sticky;
uniapp导航栏吸顶效果
m0_60605042的博客
06-20 757
【代码】uniapp导航栏吸顶效果。
uni-app 封装一个顶部选项卡组件
04-24
uni-app 封装一个顶部选项卡组件
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app-template:uni-app 通用模板
04-06
uni-app 通用模板官网地址 平台兼容说明模板说明：基于cli创建的轻量化项目模板，只保留vue最基础的使用方式，保证打包到多端时不需要作太多判断处理状态管理不建议使用vuex，因为会导致代码变得冗余，而且在编辑器...
基于uni-app开发的微信小程序商城项目
08-03
uni-app巨惠购微信小程序介绍 此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网...
uniapp吸顶效果实现
qq_29124867的博客
06-20 653
【代码】uniapp吸顶效果实现。
uni-app 滑到一定位置固定某个元素在顶部 吸顶解决方案 APP端 H5端
织网的博客
08-26 5657
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实现点击吸顶（锚点定位）
qq_42551474的博客
05-07 5788
应用场景： 很多场景我们都需要用到分类筛选，因此有时候要实现点击分类筛选的时候，分类吸顶，当上滑的时候又回到之前那个位置。 这个功能，我们要清楚几点： 1，点击分类条时候，吸顶 2，分类条滑动到顶部的时候，吸顶 3，当上滑到分类条上面的时候，去掉吸顶 根据上面几点，一步一步的实现： <view class="menu" :style="{position:scrollTop<to...
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、付费专栏及课程。

余额充值