uniapp中点击tab跳转到对应的位置，滚动到对应位置也会改变对应的tab高亮

最新推荐文章于 2024-05-14 10:59:28 发布
最新推荐文章于 2024-05-14 10:59:28 发布
阅读量129 收藏
点赞数 1
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haodanzj/article/details/137773498
版权 
<template>
	<view class="wrapper">
		<view class="header">
		</view>
		<view class="tabs" id="tabs" :style="{'display': showTabs ? 'block': 'none'}">
			<uv-tabs :current="currentTab" :list="tabs" @click="clickItem" lineColor='#1bb888'
				activeStyle="color:#1bb888;font-weight:bold" lineWidth='70px' itemStyle="width:140px;height:45px">
			</uv-tabs>
		</view>
		<view class="section">
			<view class="section">
				<view class="top" id="baseInfo">
					<view class="title">基本信息</view>
				</view>
				<view class="content content_progress">
					<view class="content_list">
						<view class="content_list_item" v-for="(item, index) of list" :key="index">
							<view class="content_list_item_label">
								{{ item.label }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="section">
				<view class="top" id="company">
					<view class="title">公司信息</view>
				</view>
				<view class="content content_progress">
					<view class="content_list">
						<view class="content_list_item" v-for="(item, index) of 10" :key="index">
							<view class="content_list_item_label">
								{{ item }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="section">
				<view class="top" id="money">
					<view class="title">财务信息</view>
				</view>
				<view class="content content_progress">
					<view class="content_list">
						<view class="content_list_item" v-for="(item, index) of 10" :key="index">
							<view class="content_list_item_label">
								{{ item }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="section">
				<view class="top" id="process">
					<view class="title">运营状况</view>
				</view>
				<view class="content content_progress">
					<view class="content_list">
						<view class="content_list_item" v-for="(item, index) of 10" :key="index">
							<view class="content_list_item_label">
								{{ item }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="section">
				<view class="top" id="layer">
					<view class="title">法务部门1</view>
				</view>
				<view class="content content_progress">
					<view class="content_list">
						<view class="content_list_item" v-for="(item, index) of 2" :key="index">
							<view class="content_list_item_label">
								{{ item }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="section">
				<view class="top" id="people">
					<view class="title">人事部门2</view>
				</view>
				<view class="content content_progress">
					<view class="content_list">
						<view class="content_list_item" v-for="(item, index) of 2" :key="index">
							<view class="content_list_item_label">
								{{ item }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		nextTick,
		ref
	} from 'vue'

	const showTabs = ref(false) // 默认吸顶的tab不显示
	const currentTab = ref(-1) // 由于初始化的uview的代码有bug，所以默认是-1，在第一次显示的时候，设置0，自动复位，防止错误
	const list = ref([{
			label: '年龄',
			value: '19'
		},
		{
			label: '性别',
			value: '男'
		}
	])
	const distanceArr = ref([]) // 每一个ID对应的scrollTop值
	const tabs = ref([{

			id: '#baseInfo',
			name: '基本信息',
		},
		{
			id: '#company',
			name: '公司信息',
		},
		{
			id: '#money',
			name: '财务信息',
		},
		{
			id: '#process',
			name: '运营状况',
		},
		{
			id: '#layer',
			name: '法务部门',
		},
		{
			id: '#people',
			name: '人事部门',
		}
	])
	const isTabChange = ref(false) // 防止在点击tab的时候，页面的滚动导致重复计算、抖动问题


	// 监听页面滚动
	onPageScroll((event) => {
		if (isTabChange.value) {
			return
		}
		const {
			scrollTop
		} = event;
		const skewY = 55 // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
		if (scrollTop >= skewY) {
			if (!showTabs.value && currentTab.value <= 0) { // 在未显示tab并且 currentTab <= 0时，防止uview ui抖动bug，设置默认复位值
				currentTab.value = 0
			}
			showTabs.value = true

			nextTick(() => {
				// console.log(distanceArr.value);
				const length = distanceArr.value.length
				const index = distanceArr.value.findIndex(el => el - skewY - scrollTop > 0)
				// 当index  == -1 的时候，实际当前滚动的距离超出了最大值，也就是在最后一个tab显示的内容
				// 当index > 0 的时候，说明能在当前的scrollTop值找到，即index的前一位
				currentTab.value = index > 0 ? index - 1 : length - 1
				// console.log(currentTab.value);
			})
		} else {
			showTabs.value = false
		}
	})

	onShow(() => {
		nextTick(() => {

			getDistanceArr()
		})

	})

	// 获取所有元素在当前页面所处的位置信息
	const getDistanceArr = () => {
		tabs.value.map(el => {
			uni.createSelectorQuery().select(el.id).boundingClientRect(data => {
				// 获取当前ID距离顶部的top值
				
				distanceArr.value.push(data.top)
			}).exec()
		})
		console.log(distanceArr.value);
	}
	const clickItem = (item, index) => {
		isTabChange.value = true
		// 方法一 简单一点直接跳转到id对应的位置 
		nextTick(() => {
			uni.pageScrollTo({
				selector: item.id,
				duration: 300,
				complete: function() {
					const timer = setTimeout(() => {
						isTabChange.value = false // 关闭
						clearTimeout(timer)
					}, 500) // 解决ios和安卓、鸿蒙系统兼容性问题
				}
			});
		})
		// 方法二  计算对应位置的top跳转
		// this.$nextTick 保证当前isTabChange 为true后执行代码
		// 避免在istabChange变为true的时候，执行代码，监听事件还是会继续执行重新计算currenTab值
		// nextTick(() => {
		// 	currentTab.value = item.index
		// 	uni.createSelectorQuery().select(item.id).boundingClientRect(data => {
		// 		uni.createSelectorQuery().select('.wrapper').boundingClientRect(res => {
		// 			const scrollTop = data.top - res.top // 获取差值
		// 			const skewY = 50 // 偏移
		// 			// 页面开始进行滚动到目标位置
		// 			uni.pageScrollTo({
		// 				scrollTop: scrollTop > 0 ? scrollTop - skewY : scrollTop + skewY,
		// 				duration: 300,
		// 				complete: function() {
		// 					const timer = setTimeout(() => {
		// 						isTabChange.value = false // 关闭
		// 						clearTimeout(timer)
		// 					}, 500) // 解决ios和安卓、鸿蒙系统兼容性问题
		// 				}
		// 			});
		// 		}).exec()
		// 	}).exec()
		// })
	}
</script>

<style scoped lang="scss">
	.wrapper {
		background: white;
		min-height: 100vh;

		.header {
			height: 100rpx;
			background: orange;

			.bg {
				width: 100vw;
				height: 200rpx;
			}
		}

		.tabs {
			position: sticky;
			z-index: 970;
			top: 0px;
			background-color: #fff;
			width: 100vw;

			.tabsStyle {
				box-shadow: 0 2rpx 6rpx 0 rgba(153, 153, 153, 0.2);

				::v-deep {
					.u-tabs {
						box-shadow: 0px 4px 6px 0 rgba(153, 153, 153, 0.2);
					}
				}
			}
		}

		.section {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.top {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;

				.title {
					font-size: 40rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					margin-left: 30rpx;
					position: relative;

					&::before {
						position: absolute;
						content: '';
						left: -30rpx;
						width: 14rpx;
						height: 77%;
						top: 10%;
						border-radius: 14rpx;
						background: #00bb84;
					}
				}

				.right {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 20rpx;

					.dots {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 33rpx;
						width: 26rpx;
						align-items: center;
						padding: 10rpx 20rpx;
						margin-right: 4rpx;

						.dot {
							width: 9rpx;
							height: 9rpx;
							background: #000000;
							border-radius: 50%;
						}
					}

					.more_menu {
						position: absolute;
						top: 70rpx;
						right: 0;
						z-index: 99;
						background: white;
						padding: 0 20rpx;
						box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
						border-radius: 4rpx;

						.more_menu_item {
							font-size: 30rpx;
							padding: 24rpx 180rpx 24rpx 16rpx;
							white-space: nowrap;
						}

						.more_menu_item:not(:last-child) {
							border-bottom: 1rpx solid #dddddd;
						}
					}
				}
			}

			.content {
				background: #f8f8f9;
				border-radius: 30rpx;
				padding: 32rpx;
				margin-top: 20rpx;

				&_top {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					margin-bottom: 24rpx;

					&_name {
						font-weight: bold;
						color: #333333;
						font-size: 32rpx;
					}

					&_ismySelf {
						background: #eeeeee;
						font-weight: 500;
						color: #999999;
						font-size: 24rpx;
						margin-left: 12rpx;
						padding: 6rpx 18rpx;
						border-radius: 10rpx;
					}
				}

				&_Info {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					padding-bottom: 20rpx;
					margin-top: 20rpx;

					&_item {
						display: flex;
						flex-direction: column;
						flex: 1;
						text-align: center;

						&_label {
							text-align: center;
							font-size: 24rpx;
							font-weight: 300;
							color: #999999;
						}

						&_value {
							font-size: 34rpx;
							font-weight: bold;
							color: #333333;
							margin-top: 14rpx;
						}
					}

					&_item:not(:last-child) {
						position: relative;

						&::after {
							position: absolute;
							content: '';
							width: 1rpx;
							height: 70rpx;
							top: 20rpx;
							right: 0;
							background: #d8d8d8;
						}
					}
				}

				&_Info:not(:last-child) {
					border-bottom: 1rpx solid #d8d8d8;
				}

				&_remark {
					font-weight: 400;
					color: #333333;
					font-size: 24rpx;
					padding-top: 20rpx;
					text-align: justify;
					min-height: 40rpx;
				}

				&_list {
					&_item {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						padding: 20rpx 0;
						border-bottom: 1rpx solid #d8d8d8;

						&_label {
							font-size: 30rpx;
							font-weight: 500;
							color: #00bb84;
							white-space: nowrap;
							width: 180rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
						}

						&_value {
							font-size: 30rpx;
							font-weight: 400;
							color: #666666;
							flex: 1;
							margin-left: 40rpx;
							align-self: center;
							word-break: break-all;
							text-align: justify;
						}
					}

					&_empty {
						height: 180rpx;
						background: #f8f8f9;
						border-radius: 10rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						&_tip {
							font-size: 20rpx;
							font-weight: 400;
							color: #999999;
							margin-top: 20rpx;
							line-height: 30rpx;
						}

						image {
							width: 64rpx;
							height: 50rpx;
						}
					}

					&_emptyResult {
						height: 240rpx;

						image {
							width: 166rpx;
							height: 166rpx;
						}

						&_tip {
							margin-top: 0;
						}
					}
				}

				&.reset {
					padding: 0;
				}

				&_reportList {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					grid-gap: 20rpx;

					&_pack {
						width: 100%;
						height: calc(25vw - 30rpx);
						border-radius: 20rpx;
					}

					&_addImage {
						width: 100%;
						height: calc(25vw - 30rpx);
						background: #f8f8f9;
						border-radius: 20rpx;
						// border: 2rpx dashed #bbbbbb;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						&_icon {
							width: 60rpx;
							height: 48rpx;
						}

						&_tip {
							font-size: 20rpx;
							font-weight: 400;
							line-height: 30rpx;
							color: #999999;
							margin-top: 14rpx;
						}
					}
				}
			}

			.content_progress {
				background: initial;
				padding: 0 30rpx;
			}

			.content_result {
				background: initial;
				font-size: 30rpx;
				font-weight: 400;
				color: #666666;
				word-wrap: break-word;
				word-break: normal;
				line-height: 60rpx;
				letter-spacing: 2rpx;
				text-align: justify;
			}

			.content_report {
				background: initial;
				padding: 12rpx 0;
			}
		}

		.section:not(:first-child) {
			margin-top: 20rpx;
		}
	}
</style>
morenhaodan
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue 刷新页面导航显示高亮位置不对问题
11-28
在头部组件里面控制导航高亮显示是checked,默认值是0，触发点击事件会重新赋值，跳转路由，当刷新页面，checked值是0，所以要监听checked时刻发生变化；利用到vue的父子和子父传值；监听状态的变化 子页面将值传给父...
Go to Tab 谷歌（Chrome）浏览器插件
03-03
Go to Tab 快速跳转到打开的网页 【插件开发者】 @praveen.dinesh6 【插件更新】 2020-02-18 15:27:23 【插件版本】 2.0.1 【插件标签】 工具 Chrome插件 【插件安装教程】 请下载文件后先解压...
uniapp横向tabs，激活tab滚动到中间
weixin_74352983的博客
11-07 493
【代码】uniapp横向tabs，激活tab滚动到中间。
uni-app实现tabs与内容的上下滚动相联动
qq_38118138的博客
09-23 2671
uni-app实现tabs与内容的上下滚动相联动
uniapp实现点击对应tabs跳转到对应模块，并滑动时tabs的滑块滑到到对应的模块
qq_62862573的博客
08-25 570
【代码】uniapp实现点击对应tabs跳转到对应模块，并滑动时tabs的滑块滑到到对应的模块。
uniapp设置滚动条滚动到指定位置
热门推荐
黎小小的博客
06-16 1万+
场景：左侧菜单栏，每次切换时，需要右侧商品展示区保持滚动条及页面在最顶部。
uniapp中菜单双联动效果（左侧点击右侧自动滚动到对应位置，右侧滚动左侧高亮对应菜单）
beLaity的博客
08-27 5339
<template> <view class="content"> <view class="ld"> <!-- :class="{active:index===change}" --> <view class="left"> <view v-for="(item,index) in kindlist" :key="index" @click="setid(index)" :class="
左侧锚点点击滚动到相应位置，并且滚动轴滚动到位置对应的锚点需要高亮，两者冲突bug
qq_45067263的博客
06-22 1687
项目场景： 提示：这里简述项目相关背景： 项目中需要左侧锚点点击滚动到相应位置，并且滚动轴滚动到位置对应的锚点需要高亮 问题描述： 写完之后发现点击锚点之后页面滚动触发了滚动相应位置的对应锚点高亮，所以锚点显示就是一个挨着一个高亮一直到点击的那个锚点结束，这就冲突了，一个点击了应该立即高亮不应该再一个一个挨着亮到点击的那个，就是两者冲突造成的，点击的时候页面滚动，触发了另一个功能 实现滚动监听并实时显示对应锚点高亮： mounted： this.$nextTick(function () {
【uniapp tabs标签组件】移动端tabs标签组件，点击标签滚动到中间位置，点击标签横向滚动显示完全【复制即用】
seeeeeeeeeee的博客
03-20 2981
这个tabs功能是很多移动端项目都要用的最近我刚好遇到了这个功能因为我们项目不让用uview等组件。所以只能用uniapp自带的组件uni-ui但是问题就是这里没有这种滚动的tabs标签组件用啊。所以万不得已之下，我cv工程师只好动动小手写一个组件了。刚好这里也发出来保存一下，以后在用到可以直接复制了。
在html中实现点击滚动条滑动到相应位置并实现锚点过渡效果
weixin_52921391的博客
08-13 2394
话不多说，直接上代码 html部分 用a链接实现跳转，href里是想跳转响应位置div的id，现在就是已经能实现跳转效果了 <div class="about-tab"> <a href="#introduction" class="text active">简介</a> <a href="#culture" class="text">企业文化</a> <
微信小程序点击高亮显示并切换到对应的内容
XiehaiyanLI的博客
08-13 4659
点击高亮显示并切换到对应的内容具体实现方法： 先把头部要切换的标题渲染出来 把每个title点击后对应的内容渲染出来，这个时候是把所有的对应的内容渲染出来了，需要在data中定义一个selIndex当作当前点击的下标。 data: { typeList: [{ id: 1, typename: '推荐', content: '我是推荐内容' }, { id: 2, typename:
vue 监听滚动事件之菜单滚动吸顶&&点击滑动到指定位置&&点击高亮
凌风的博客
07-22 1万+
菜单滚动吸顶效果： html: &lt;section class="switchModule" id="switchModule"&gt; &lt;div class="switchNavbar" id="switchNavbarId" :class="searchBarFixed == true ? 'isFixed' :''&quo
js点击button按钮跳转到另一个新页面
10-25
点击按钮怎么跳转到另外一个页面呢？点击图片要跳转到新的页面时，怎么做到呢？可以使用onclick=[removed]=新页面来实现
高亮工具「Highlight tool」-crx插件
03-20
使用跳转和正则表达式突出显示工具 使用常规文本或RegExp快速突出显示网页中的文字。 按Ctrl + j移至下一个匹配项，按Ctrl + k移动上一个匹配项。 支持语言:English
jquery-easyui-EDT-1.5.5.7z
05-30
combobox：修复在Windows10的IE11下点击下拉面板会自动跳转到底部的问题； datebox：修复点击'Today'按钮时不会触发onSelect事件的问题； propertygrid：修复在仅编辑了一行数据的时候调用'getChanges'方法无法获取...
uniapp实现列表拖拽排序+滑动删除功能
TZ1284063988的博客
05-14 389
此篇代码在原插件基础进行了bug修改与滑动功能的新增 原插件地址 HM-dragSorts.vue组件使用 HM-dragSorts.vue <template> <view class=""> <view class="HM-drag-sort" :style="{'height': ListHeight+'rpx','background-color': listBackgroundColor}"> <!-- 拖拽中显示的行 -->
【全开源】预约咨询小程序基于Fastadmin+ThinkPHP和Uniapp
2401_84413903的博客
05-13 305
基于Fastadmin+ThinkPHP和Uniapp开发的预约咨询系统，可应用于心理咨询、问诊、法律咨询等咨询类场景。
uniapp全局变量
最新发布
youhebuke225的博客
05-14 462
在 UniApp 中，全局变量通常用于存储需要在整个应用程序中共享的数据或配置。虽然 UniApp 没有直接提供全局变量的概念，但你可以通过几种不同的方式来实现全局变量的功能。
jquery实现点击tab,对应的html页面展示在index页面中
06-08
如果你想在点击tab时，将对应的HTML页面展示在index页面中，可以使用jQuery的Ajax方法来实现。 以下是一个示例代码： HTML代码部分： ```html <div class="tab-container"> <ul class="tab-nav"> <li data-url="page1.html">Tab 1</li> <li data-url="page2.html">Tab 2</li> <li data-url="page3.html">Tab 3</li> </ul> <div class="tab-content"></div> </div> ``` CSS代码部分： ```css .tab-nav li { display: inline-block; padding: 10px; border: 1px solid #ccc; cursor: pointer; } .tab-nav li.active { background-color: #ccc; } ``` JavaScript代码部分： ```javascript $(function() { $('.tab-nav li').click(function() { var url = $(this).data('url'); // 获取当前点击的tab对应的HTML页面的URL $(this).addClass('active').siblings().removeClass('active'); // 切换选中tab的样式 // 发送Ajax请求，获取对应的HTML页面内容 $.ajax({ url: url, type: 'GET', dataType: 'html', success: function(data) { $('.tab-content').html(data); // 将HTML页面内容展示在tab-content中 } }); }); }); ``` 以上代码中，我们给每个tab添加了一个data-url属性，用来存储对应的HTML页面的URL。当点击tab时，我们使用jQuery的Ajax方法发送GET请求，获取对应的HTML页面内容，并将其展示在tab-content中。 需要注意的是，由于Ajax请求是异步的，所以在获取到HTML页面内容前，tab-content中会显示loading状态，这可以通过添加 loading 动画或遮罩层来优化用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值