uniapp代码 --商城详情页,导航随着页面的滚动自动跳转，点击导航项跳转至相应位置

最新推荐文章于 2024-10-22 11:42:14 发布
最新推荐文章于 2024-10-22 11:42:14 发布
阅读量880 收藏 10
点赞数 5
文章标签： uni-app javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56983341/article/details/137116557
版权

呈现效果

在这里插入图片描述

说明：实现导航与滑动内容之间的双向绑定，页面滑动时导航选中项会自动进行切换、当切换导航选中项，滑动内容会跳转至相应位置;

操作步骤

1.页面渲染，设置导航部分与滑动盒子；
<template>
	<view class="detail">
        <!-- 导航部分 -->
		<view class="nav_box">
			<view class="nav_item">{{item.title}} </view>
		</view>
		</view>
		 <!-- 滑动内容部分 -->
		<scroll-view ref="scrollView" scroll-y="true"  class="scroll_box" >
			<view id="cp"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} cp</view>
			<view id="cb"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} cb</view>
			
			<view id="pj" ></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} pj</view>
			
			<view id="yy"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} yy</view>
			
			<view id="sg"></view>
				<view class="item" v-for="item,index in 50" :key="index">{{item}} sg</view>
			
			
		</scroll-view>
		
	</view>
</template>
<script setup>
import { ref } from "vue"
	// 导航列表
	const navList = ref([
		{
			id:1,
			title:"产品",
		},
		{
			id:2,
			title:"成本",
		},
		{
			id:3,
			title:"评论",
		},
		{
			id:4,
			title:"运营",
		},
		{
			id:5,
			title:"事故"
		},
	])
	</script>

<style lang="scss" scoped>
	.detail{
		.top{
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			height: 100rpx;
			.search{
				flex: 1;
			}
			.top_icon{
				width: 60rpx;
				height: 60rpx;
				padding: 20rpx;
				margin-left: 20rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.share{
				width: 50rpx;
				height: 50rpx;
			}
		}
		.nav_box{
			position: fixed;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 100rpx;
			padding: 0 30rpx;
			box-shadow: 5rpx 5rpx 10rpx rgba(0, 0,0, 0.5);
			background-color: #fff;
			z-index: 10;
			.nav_item{
				padding: 20rpx;
				// background-color: pink;
				
			}
			.active{
				color: $theme-color;
			}
		}
		.scroll_box{
			background-color: pink;
		}
	}

</style>
2.获取滚动高度；

通过uni.getSystemInfoSync()获取页面信息来动态设置导航盒子的高度与位置、获取的区域

<template>
    <view class="detail">
		<view class="nav_box" id="nav_box" :style="{top:nav_height + 'px'}">
			<view class="nav_item" :class="{'active':index == currentIndex}" v-for="item,index in navList" :key="index" >{{item.title}} </view>
		</view>
		<view class="fill" :style="{height:nav_box_height + 'px'}">
			
		</view>
		<scroll-view ref="scrollView" scroll-y="true" class="scroll_box" :style="{height: window_height + 'px'}" >
			<view id="cp"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} cp</view>
			<view id="cb"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} cb</view>
			
			<view id="pj" ></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} pj</view>
			
			<view id="yy"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} yy</view>
			
			<view id="sg"></view>
				<view class="item" v-for="item,index in 50" :key="index">{{item}} sg</view>
			
			
		</scroll-view>
		
	</view>
</template>
<script setup>
	import { ref,onMounted } from "vue"
	
	
	const window_height = ref(0)// 视图可用高度
	const nav_height = ref(0)//头部导航条高度
	const nav_box_height = ref(0)// 导航高度 
	onMounted(()=>{
		// 设置导航头部高度、导航高度
		let  SYSTEM_INFO =  uni.getSystemInfoSync()
		const nav_box = document.getElementById("nav_box").offsetHeight
		nav_box_height.value = nav_box
		window_height.value = SYSTEM_INFO.windowHeight - nav_box
		nav_height.value = SYSTEM_INFO.windowTop
		
	})
	</script>

3.获取滚动各节点距离滑动的位置；
通过uni.createSelectorQuery()获取滑动各节点位置

<script setup>
	import { onLoad, } from "@dcloudio/uni-app"
	import { ref,onMounted } from "vue"
   // 各部分距离头部的高度
	const scrollView = ref(null)
	const cpNode = ref(null)
	const cbNode = ref(null)
	const pjNode = ref(null)
	const yyNode = ref(null)
	const sgNode = ref(null)
    onMounted(()=>{
		// 获取滑动各个子节点的滑动高度
		const query = uni.createSelectorQuery().in(scrollView.value)
		query.select('#cp').boundingClientRect((rect)=>{
			cpNode.value = rect.top
		}).exec();
		query.select('#cb').boundingClientRect((rect)=>{
			cbNode.value = rect.top
		}).exec();
		query.select('#pj').boundingClientRect((rect)=>{
			pjNode.value = rect.top
		}).exec();
		query.select('#yy').boundingClientRect((rect)=>{
			yyNode.value = rect.top
		}).exec();
		query.select('#sg').boundingClientRect((rect)=>{
			sgNode.value = rect.top
		}).exec();
	})
</script>

4.在scroll-view中的scroll事件中，设置导航选中项；

      <view class="nav_box" id="nav_box" :style="{top:nav_height + 'px'}">
			<view class="nav_item" :class="{'active':index == currentIndex}" v-for="item,index in navList" :key="index" >{{item.title}} </view>
		</view>
		<view class="fill" :style="{height:nav_box_height + 'px'}">
			
		</view>
       <scroll-view ref="scrollView" scroll-y="true" :scroll-top="scroll_top" class="scroll_box" :style="{height: window_height + 'px'}" @scroll="scrollHandle">
			<view id="cp"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} cp</view>
			<view id="cb"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} cb</view>
			
			<view id="pj" ></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} pj</view>
			
			<view id="yy"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} yy</view>
			
			<view id="sg"></view>
				<view class="item" v-for="item,index in 50" :key="index">{{item}} sg</view>
			
			
		</scroll-view>

const currentIndex = ref(0)// 选中导航
 const scrollHandle = (e) => {
		let scrollTop = e.detail.scrollTop
		if(scrollTop>=cpNode.value && scrollTop<cbNode.value){
			currentIndex.value = 0
		}else if(scrollTop>=cbNode.value && scrollTop<pjNode.value){
			currentIndex.value = 1
		}else if(scrollTop>=pjNode.value && scrollTop<yyNode.value){
			currentIndex.value = 2
		}else if(scrollTop>=yyNode.value && scrollTop<sgNode.value){
			currentIndex.value = 3
		}else{
			currentIndex.value = 4
		}
	}

5.设置切换导航项；

       <view class="nav_box" id="nav_box" :style="{top:nav_height + 'px'}">
			<view class="nav_item" :class="{'active':index == currentIndex}" v-for="item,index in navList" :key="index" @click="navHandle(index)">{{item.title}} </view>
		</view>

// 切换导航位置
    const scroll_top = ref(0)// 滚动头部跳转的位置
	const navHandle = (e) => {
		switch (e) {
		   case 0:  
		     scroll_top.value = cpNode.value ? cpNode.value : 0; // 使用 offsetTop 获取节点顶部位置  
		     break;  
		   case 1:  
		     scroll_top.value = cbNode.value ? cbNode.value : 0;  
		     break;  
		   case 2: // 注意：这里你写的是 1，但我假设你可能是想写 3  
		    scroll_top.value = pjNode.value ? pjNode.value : 0; // 根据你的描述，这里似乎仍然是 pjNode  
		     break;  
		   case 3:  
		    scroll_top.value = yyNode.value ? yyNode.value : 0;  
		     break;  
		   default:  
		    scroll_top.value = sgNode.value ? sgNode.value : 0; // 默认滚动到 sgNode  
		 }  
		
	}

完整代码

<template>
	<view class="detail">
        <!-- 导航部分 -->
		<view class="nav_box" id="nav_box" :style="{top:nav_height + 'px'}">
			<view class="nav_item" :class="{'active':index == currentIndex}" v-for="item,index in navList" :key="index" @click="navHandle(index)">{{item.title}} </view>
		</view>
		<view class="fill" :style="{height:nav_box_height + 'px'}">
			
		</view>
		 <!-- 滑动内容部分 -->
		<scroll-view ref="scrollView" scroll-y="true" :scroll-top="scroll_top" class="scroll_box" :style="{height: window_height + 'px'}" @scroll="scrollHandle">
			<view id="cp"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} cp</view>
			<view id="cb"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} cb</view>
			
			<view id="pj" ></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} pj</view>
			
			<view id="yy"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} yy</view>
			
			<view id="sg"></view>
				<view class="item" v-for="item,index in 50" :key="index">{{item}} sg</view>
			
			
		</scroll-view>
		
	</view>
</template>

<script setup>
	import { ref,onMounted } from "vue"
	// 导航列表
	const navList = ref([
		{
			id:1,
			title:"产品",
		},
		{
			id:2,
			title:"成本",
		},
		{
			id:3,
			title:"评论",
		},
		{
			id:4,
			title:"运营",
		},
		{
			id:5,
			title:"事故"
		},
	])
	const currentIndex = ref(0)// 选中导航
	const scroll_top = ref(0)// 滚动头部跳转的位置
	// 各部分距离头部的高度
	const scrollView = ref(null)
	const cpNode = ref(null)
	const cbNode = ref(null)
	const pjNode = ref(null)
	const yyNode = ref(null)
	const sgNode = ref(null)
	
	// 视图可用高度
	const window_height = ref(0)
	const nav_height = ref(0)//头部导航条高度
	const nav_box_height = ref(0)//导航高度
	// 切换导航位置
	const navHandle = (e) => {
		switch (e) {
		   case 0:  
		     scroll_top.value = cpNode.value ? cpNode.value : 0; // 使用 offsetTop 获取节点顶部位置  
		     break;  
		   case 1:  
		     scroll_top.value = cbNode.value ? cbNode.value : 0;  
		     break;  
		   case 2: // 注意：这里你写的是 1，但我假设你可能是想写 3  
		    scroll_top.value = pjNode.value ? pjNode.value : 0; // 根据你的描述，这里似乎仍然是 pjNode  
		     break;  
		   case 3:  
		    scroll_top.value = yyNode.value ? yyNode.value : 0;  
		     break;  
		   default:  
		    scroll_top.value = sgNode.value ? sgNode.value : 0; // 默认滚动到 sgNode  
		 }  
		
	}
    const scrollHandle = (e) => {
		let scrollTop = e.detail.scrollTop
		if(scrollTop>=cpNode.value && scrollTop<cbNode.value){
			currentIndex.value = 0
		}else if(scrollTop>=cbNode.value && scrollTop<pjNode.value){
			currentIndex.value = 1
		}else if(scrollTop>=pjNode.value && scrollTop<yyNode.value){
			currentIndex.value = 2
		}else if(scrollTop>=yyNode.value && scrollTop<sgNode.value){
			currentIndex.value = 3
		}else{
			currentIndex.value = 4
		}
	}
	onMounted(()=>{
		// 设置导航头部高度、导航高度
		let  SYSTEM_INFO =  uni.getSystemInfoSync()
		const nav_box = document.getElementById("nav_box").offsetHeight
		nav_box_height.value = nav_box
		window_height.value = SYSTEM_INFO.windowHeight - nav_box
		nav_height.value = SYSTEM_INFO.windowTop
		
		// 获取滑动各个子节点的滑动高度
		const query = uni.createSelectorQuery().in(scrollView.value)
		query.select('#cp').boundingClientRect((rect)=>{
			cpNode.value = rect.top
		}).exec();
		query.select('#cb').boundingClientRect((rect)=>{
			cbNode.value = rect.top
		}).exec();
		query.select('#pj').boundingClientRect((rect)=>{
			pjNode.value = rect.top
		}).exec();
		query.select('#yy').boundingClientRect((rect)=>{
			yyNode.value = rect.top
		}).exec();
		query.select('#sg').boundingClientRect((rect)=>{
			sgNode.value = rect.top
		}).exec();
	})
	
</script>

<style lang="scss" scoped>
	.detail{
		.top{
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			height: 100rpx;
			.search{
				flex: 1;
			}
			.top_icon{
				width: 60rpx;
				height: 60rpx;
				padding: 20rpx;
				margin-left: 20rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.share{
				width: 50rpx;
				height: 50rpx;
			}
		}
		.nav_box{
			position: fixed;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 100rpx;
			padding: 0 30rpx;
			box-shadow: 5rpx 5rpx 10rpx rgba(0, 0,0, 0.5);
			background-color: #fff;
			z-index: 10;
			.nav_item{
				padding: 20rpx;
				// background-color: pink;
				
			}
			.active{
				color: $theme-color;
			}
		}
		.scroll_box{
			background-color: pink;
		}
	}

</style>

扩展：步骤五可以通过中的scroll-into-view属性进行切换（当不需要进行滑动框内容对导航绑定时可以进行使用，例如：常规分类页中左右结构的滑动，*代码量会减少一些）

       <view class="nav_box" id="nav_box" :style="{top:nav_height + 'px'}">
			<view class="nav_item" :class="{'active':index == currentIndex}" v-for="item,index in navList" :key="index" @click="navHandle(index)">{{item.title}} </view>
		</view>
		<view class="fill" :style="{height:nav_box_height + 'px'}">
			
		</view>
		<scroll-view scroll-y="true" :scroll-into-view="activeId" :style="{height: window_height + 'px'}">
			<view id="cp"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} cp</view>
			<view id="cb"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} cb</view>
			
			<view id="pj" ></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} pj</view>
			
			<view id="yy"></view>
				<view class="item" v-for="item,index in 20" :key="index">{{item}} yy</view>
			
			<view id="sg"></view>
				<view class="item" v-for="item,index in 50" :key="index">{{item}} sg</view>
			
			
		</scroll-view>

<script setup>
	import { ref,onMounted } from "vue"
	// 导航列表
	const navList = ref([
		{
			id:1,
			title:"产品",
		},
		{
			id:2,
			title:"成本",
		},
		{
			id:3,
			title:"评论",
		},
		{
			id:4,
			title:"运营",
		},
		{
			id:5,
			title:"事故"
		},
	])
	const currentIndex = ref(0)// 选中导航
	// 各部分距离头部的高度
	
	// 视图可用高度
	const window_height = ref(0)
	const nav_height = ref(0)//头部导航条高度
	const nav_box_height = ref(0)//导航条高度// 导航高度
	
	const activeId = ref('')
	 
	// 切换导航位置
	const navHandle = (e) => {
		currentIndex.value  = e
		switch (e) {
		case 0:
		  activeId.value = 'cp' 
		  break;  
		case 1:  
		  activeId.value = 'cb'
		  break;  
		case 2:  
		activeId.value = 'pj'
		  break;  
		case 3:  
		activeId.value = 'yy'
		  break;  
		default:  
		activeId.value = 'sg'
		}
		
	}
	onMounted(()=>{
		// 设置导航头部高度、导航高度
		let  SYSTEM_INFO =  uni.getSystemInfoSync()
		const nav_box = document.getElementById("nav_box").offsetHeight
		nav_box_height.value = nav_box
		window_height.value = SYSTEM_INFO.windowHeight - nav_box
		nav_height.value = SYSTEM_INFO.windowTop
		
		
	})
	
</script>

*存在优化法：将节点名称放入一个数组中，例：

const scrollIds = ['cp', 'cb', 'pj', 'yy', 'sg'];
const navHandle = (e) => {
		currentIndex.value  = e
		activeId.value = scrollIds[e]	
	}
代廷耀
关注
uni-app - 详细实现新闻动态 / 公告上下滚动列表（上下循环滚动，无限上下自动滚动列表），一键复制代码运行即可。
王佳斌
06-14 8538
您可以自定义滚动间隔与 显示多少个 列表，另外点击每项会触发事件，可用于跳转到详情页。代码干净整洁，注释详细，具体如下图所示显示 3 个：随便找个页面，复制以下代码。 写在后面 例如，我要将示例从 3 行改为 2 行，我要做以下改动：大功告成。...
uni-app导航跳转
Gengjinyue的博客
03-04 1506
Uni中的导航跳转 navigator 页面链接 属性 属性名 默认值 说明 url 应用内的跳转链接，值为相对路径或绝对路径，如："…/first/first"，"/pages/first/first"，注意不能加 .vue 后缀 open-type navigate 跳转方式 delta 当 open-type 为 ‘navigateBack’ 时有效，表示回退的层...
uniapp点击跳转到对应位置
qq_43193513的博客
09-13 619
其实就是标签选择器 获取到对应标签所在的高度，然后用uni.pageScrollTo跳转，这是在正常页面上的跳转，scroll-view中更方便。
uniapp组件scroll-view指定滚动到指定位置
JUEESSS的博客
02-08 5252
我这里要实现不管选择了那天，选中pink色的日期都在第二位 :scroll-into-view=“scrollto” data(){ scrollto: 0 } 给scroll-view中的view设置id：:id="‘date_’ + index" 在每次选择日期的时候，筛选出对应的日期的index，赋值给他 this.scrollto = ‘date_’ + (index==0?0:index - 1) //防止选择1号index为-1报错 ...
uni-app中scroll-view标签 跳转到指定的位置
业余前端的职业经历
02-13 1万+
这是一个城市选择的界面 下面是以字母开头的城市列表 我要实现的功能 就是 点击右侧的字母跳转到指定的点击字母开头的城市 首先看到的这个显示的城市是封装在一个组件 我封装到了一个 暂且 A 组件里面 <view class="changeList"> // scroll-into-view 跳转到指定 id的 view元素的位置 <scro...
uniapp vu3 scroll-view 滚动到指定位置
TaylorY的博客
05-15 1155
（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。将选择器的选取范围更改为自定义组件。
uniapp 商品分类点击/滚动定位 scroll-view
MELANCHOLY ❤ ◁ ❚❚ ▷
06-23 3729
左分类，右商品 左点击跳到其商品区 右滑动，左跳到其分类
uniapp 文章详情页，富文本解析，详情页跳转，包括CSS样式设置
qq_37455326的博客
01-12 674
【代码】uniapp 文章详情页，富文本解析，详情页跳转。
导航滚动到一定高底后吸顶，锚点定位自动跟随
09-28
导航滚动到一定高底后吸顶，锚点定位自动跟随 //内容信息导航吸顶 $(document).ready(function(){ var navHeight= $("#navHeight").offset().top; var navFix=$("#nav-wrap"); $(window).scroll(function(){...
使用HBuilder uni-app VUE 创建微信小程序中 自定义搜索组件点击跳转页面
weixin_66511008的博客
10-07 1048
使用HBuilder uni-app VUE 创建微信小程序中 自定义搜索组件点击跳转页面
uniapp - 购物车模块
最新发布
lzping_719的专栏
10-22 792
完成加入购物车，购物车列表交互，计算结算金额等业务。在商品详情页把 选中规格后的商品(SKU) 加入购物车。接口详情接口地址：/member/cart请求方式：POST登录权限: 是请求参数：Body接口封装 参考代码 通过 组件提供的 事件，获取加入购物车时所需的参数。 购物车列表 购物车列表需要访问后才能登录。 登录状态 已登录显示购物车列表，否则应引导用户去登录。 列表渲染 调用接口获取当前登录用户购物车中的商品列表。接口信息接口地址：/member/cart请求方式：GET登录权限: 是请求参数
uni-app商城前端源码-完整源码参考-含订单处理流程
12-03
uni-app商城前端源码-完整源码参考-含订单处理流程，目录 store static pages components common uni.scss pages.json manifest.json main.js App.vue
uni-app scrollview滚动到顶部或任意位置
热门推荐
宏斌的博客
03-25 1万+
两种方案 实现： 变更 scroll-top的值即可 以竖向为例 1,指定位置为0-1的随机数，1px不容易看出来，一般场景足够，滚动到300位置可以用300 + Math.random()偏差很小，可以容忍 <scroll-view scroll-y="true" :scroll-top="scrollViewTop"> this.scrollViewTop = Math.random(); 2，结合@scroll事件一直监听，个人认为对性能是一种损耗 <scroll-view s
uniapp 滚动页面到指定位置
weixin_58421147的博客
03-01 3571
uniapp 点击滚动页面到指定位置
uniapp日常总结--uniapp页面跳转方式
前端工作学习中
12-13 1万+
UniApp（跨平台应用开发框架）是基于Vue.js的一种开发框架，可以用于同时在多个平台上构建应用程序，如iOS、Android等。在UniApp中，跳转页面通常使用uni.navigateTo、uni.redirectTo、uni.reLaunch等方法，具体方法的选择取决于你的需求。
uni-app 滚动到指定位置
qq_36529240的博客
05-10 3064
方法二 使用uni.pageScrollTo 使页面纵向滚到到指定位置。无法滚动 将代码放在setTimeout，nextTick里执行。方法1：使用标签，可以将页面横向（或纵向）滚动到指定位置。建议设置height为auto :height:auto。
uniapp 页面滚动到指定位置
MAIMIHO的博客
02-27 2721
<view id="container"> <view id="target"> </view> </view> uni.createSelectorQuery() .select(".container")//对应外层节点 .boundingClientRect((container) => { uni.createSelectorQuery() .select("#target")//目标节点
uniapp在指定区域内的滚动
weixin_68658847的博客
04-02 1366
uniapp在指定区域内的滚动
uni-app中的导航跳转
atu1111的博客
07-24 4224
uni-app中的导航跳转 1.利用navigator进行跳转   该组件类似HTML中的<a> 组件，但只能跳转本地页面。目标页面必须在pages.json中注册。   navigator详细文档：文档地址   项目目录结构如下： 1.1 跳转到普通页面   代码示例： <navigator url="../detail/detail">跳转至详情页面</navigator>   效果如下：   同时左上角出现返回箭头 1.2 跳转到tabbar页面   代
uniapp scroll-into-view不自动跳转到顶端
08-19
对于 `scroll-into-view` 在 Uniapp 中不自动跳转到顶端的问题，您可以尝试以下几种方法来解决： 1. 使用 `setTimeout` 延迟执行 `scroll-into-view`，例如： ```javascript setTimeout(() => { uni.pageScrollTo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值