uniapp 实现滑动视图切换 顶部滚动导航栏

news2024/9/30 11:27:31

无论小程序的时候一般有这个功能,在页面处于首页时候,滑动视图,切换视图顶部滚动导航也跟着切换

在这里插入图片描述
1.想要实现这个功能就需要实现顶部导航栏,首先实现顶部滚导航栏 点击高亮颜色显示
模板代码

<scroll-view scroll-x="true" class="scroll-content"  >
//滑动导航栏数组
	<view v-for="(item,index) in topBar" :key="index"  class="scroll-item" >
		<text  :class="index==topindex?'f-color-active':'f-color'" @click="addclick(index)" >{{item.name}}</text>
	</view>
</scroll-view>

采用的是class样式绑定 ,写一份高亮样式,和普通样式,定义一个滑动默认高亮索引当,高亮索引等于当前的v-for点击的索引时候,高亮,

var topindex =ref(0);//默认第一个区域高亮索引
  //高亮方法
 var addclick=(index)=>{
	 console.log("用户点击了第几个tabbar",index);
	 // 索引改变用来判断当前样式是为否点击样式 这样就是
	 topindex.value=index;
	 
 };

css

/* 字体颜色 */
.f-color{
	color: #636263;
}

/* 选中字体颜色 */
.f-color-active{
	color: #2979ff;
}

2.然后接下来实现滑动导航栏点击的时候内容区域的页面跟着切换,大概逻辑是一样的既然上面,通过高亮索引等于当前v-for循环的内容视图索引显示即可,但是要实现页面滑动,顶部导航栏也跟着滑动,所以下面的内容区域不能用view 而是使用swipier轮播器

滑动视图实现滑动效果(当然是关闭了自动切换那些属性的)
在这里插入图片描述

swpiper的current属性决定了当前滑动显示的视图区域
在这里插入图片描述
所以代码块就可以同v-for滚动导航的数据列表,来实现滚动导航栏在那个索引,内容显示那个索引 ,内容区域使用的是scrollview滚动视图,方便后期数据扩展来动态设置内容区域高度

<!-- swiper顶部的容器,让他可以随着选项卡切换而且切换  改变时候触发切换事件 current属性和数据的index刚好对应-->
			<swiper  :current="topindex" >
				<!-- 要跟着tab循环 所以数据也跟着循环 -->
				<swiper-item  v-for="(item,index) in topBar" :key="index" >
					<!-- 做滑底部刷新 @scrolltolower -->
					
					<scroll-view :scroll-y="true"  class="swiper-item" >
			<！--内容区域-->
			</scroll-view>	
				</swiper-item>
			</swiper>

现在实现了滚动导航栏切换,内容区域切换,但是还没有实现内容区域滑动,上面的滚动条跟着变化所以,为swipper添加滑动事件,

	<!-- viewindex是下方的视图id  滑动内容可以实现导航样式跟着改变到但是无法实现滑动导航区域滑动 -->
	<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="viewindex" >
		<view v-for="(item,index) in topBar" :key="index"  class="scroll-item" :id="'top'+index">
			<text  :class="index==topindex?'f-color-active':'f-color'" @click="addclick(index)" >{{item.name}}</text>
		</view>
	</scroll-view>
<!-- swiper顶部的容器,让他可以随着选项卡切换而且切换  改变时候触发切换事件 current属性和数据的index刚好对应-->
			<swiper @change="onChangeTab" :current="topindex" :style="'height:'+viewHeight+'px;'">
				<!-- 要跟着tab循环 所以数据也跟着循环 -->
				<swiper-item  v-for="(item,index) in topBar" :key="index" >
					<!-- 做滑底部刷新 @scrolltolower -->
					
					<scroll-view :scroll-y="true"  :style="'height:'+viewHeight+'px;'" class="swiper-item" >
		
			</scroll-view>	
				</swiper-item>
			</swiper>

修改后的js

  var viewindex= ref(0)
  //高亮方法
 var addclick=(index)=>{
	 console.log("用户点击了第几个tabbar",index);
	 // 索引改变用来判断当前样式是为否点击样式
	 topindex.value=index;
	 console.log(topindex),
	 // 视图跟顺点击改变
	 viewindex="top"+index;
 };
 	 var onChangeTab=(e)=>{
	 // 从wipper 滑动视图的detail拿到索引
	 console.log("用户开始滑动页面",e.detail);
	 // 把滑块索引传递实现滑动改变top 索引  用户滑动那个区域对应顶部导航也跟着滑动
	 addclick(e.detail.current);
 };

滑动事件可以获取到当前元素参数,detail属性中可以知道当前滑动到第几个索引了,因为和滚动导航栏一样是循环的同样导航栏数据,所以索引位置能够皮蓬

这里我为滚动视图添加了:scroll-into-view="viewindex"属性,是因为当内容区域一直滑动,滚动导航栏可以会出现内容高亮的部分在显示可视外边,所以就要用该属性设置，内容区域的索引在哪,滚动导航的视图在哪,不然就出现高亮,但是高亮部分在滚动导航栏末尾

在这里插入图片描述
注意哦,这个属性定位视图范围是根据id来的,但是不能以数字开头,所以我的滚动导航栏的子视图id和js方法是做了拼接的

scroll-view对应的子视图

<view v-for="(item,index) in topBar" :key="index"  class="scroll-item" :id="'top'+index">

和高亮方法做的拼接

 viewindex="top"+index;

这样就实现了内容区域滑动,滚动导航栏滑动,但是还有个问题,当我
内容区域下滑到底刷新数据时(data=[…data,…apirespose.dataArrary]),
高度固定的到导致内容限制不完 善,所以要设置动态高度
所以内容区域的高度是动态变量

<swiper @change="onChangeTab" :current="topindex" :style="'height:'+viewHeight+'px;'">
		<!-- 要跟着tab循环 所以数据也跟着循环 -->
		<swiper-item  v-for="(item,index) in topBar" :key="index" >
			<!-- 做滑底部刷新 @scrolltolower -->
			
			<scroll-view :scroll-y="true"  :style="'height:'+viewHeight+'px;'" class="swiper-item" >

这里的viewHeight就是设置的变量,初始化为0,没有数据,等页面加载的时候根据手机设备高度来动态计算

var viewHeight=ref(0)

uniapp api获取设备信息
在这里插入图片描述
成功的回调函数中包含可使用高度
在这里插入图片描述

注意获取使用设备的可视化高度的时候要使用同步api 避免页面初始化,异步操作还没执行,应该先计算高度在初始化数据
计算可使用高度

 //获取刘海以及状态栏区域
	const getDeviceHeight = () => {
				const res = uni.getSystemInfoSync();
				const system = res.platform;
				if( system ==='ios' ){
					return 44+res.statusBarHeight;
				}else if( system==='android' ){
					return 48+res.statusBarHeight;
				}else{
					return 0;
				}
				
			};

页面初始化时候开始计算高度:内容区域高度=可使用高度-滚动导航栏高度(rpx转px)-刘海/挖孔和状态栏高度

  onLoad(()=>{
		   console.log("=============程序开始加载,初始化=================");
		     init();
		
		 
	   });
	   //减去80
onReady(()=>{
	uni.getSystemInfo({
		success: (res) => {
			viewHeight.value = res.windowHeight - uni.upx2px(80)-getDeviceHeight();
		}
	})
})

这样就实现了所有内容,以下是完整代码,内容区域使用的是整合的组件,采用v-if判断是否应该在高亮时候显示

<template>
	<view class="home">
	<!-- #ifdef MP-WEIXIN -->
	<!-- 自定意的导航 -->
	<view class="wx-nav">
		<view class="iconfont icon-fangdajing left"></view>
		<text uni-title>小 猴 体 育</text>
		<view class="iconfont icon-shouye right"></view>
	</view>
	<!-- 顶部滑动选项卡 -->
	
	<!-- viewindex是下方的视图id  滑动内容可以实现导航样式跟着改变到但是无法实现滑动导航区域滑动 -->
	<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="viewindex" >
		<view v-for="(item,index) in topBar" :key="index"  class="scroll-item" :id="'top'+index">
			<text  :class="index==topindex?'f-color-active':'f-color'" @click="addclick(index)" >{{item.name}}</text>
		</view>
	</scroll-view>
	<!-- 导航过后是切换的栏 swper 考虑多方面使用封装为组件 -->

		<view class="wx-content">
			<!-- swiper顶部的容器,让他可以随着选项卡切换而且切换  改变时候触发切换事件 current属性和数据的index刚好对应-->
			<swiper @change="onChangeTab" :current="topindex" :style="'height:'+viewHeight+'px;'">
				<!-- 要跟着tab循环 所以数据也跟着循环 -->
				<swiper-item  v-for="(item,index) in topBar" :key="index" >
					<!-- 做滑底部刷新 @scrolltolower -->
					
					<scroll-view :scroll-y="true"  :style="'height:'+viewHeight+'px;'" class="swiper-item" >
			<block>
			<!--推荐模块 轮框画图 urls 传递图片数组改变 -->
			 	<indexSwipper greeting="Hola" message="customMessage" v-if="item.name=='推荐'" ></indexSwipper>
				<ShopCard title="猜你喜欢" v-if="item.name=='推荐'" ></ShopCard>
				 <Recommend v-if="item.name=='推荐'" ></Recommend>
				  <CardList v-if="item.name=='推荐'" ></CardList>
				  <CardList v-if="item.name=='推荐'" ></CardList>
				  <CardList v-if="item.name=='推荐'" ></CardList>
				  <CardList v-if="item.name=='推荐'" ></CardList>
				<!--推荐模块 轮框画图 urls 传递图片数组改变 -->
						<ShopCard  v-if="item.name=='运动户外'" title="体育户外"></ShopCard>
									<index-banner url="../../static/img/banner1.jpg" v-if="item.name=='运动户外'"></index-banner >
									<index-icons v-if="item.name=='运动户外'"></index-icons>
									<!-- 就是一个3X4的图片集合 -->
									<!-- 传递imagelist的图片数组动态改变   这里写死-->
									<index-imagelist v-if="item.name=='运动户外'"></index-imagelist>
									<ShopCard title="热销爆品" v-if="item.name=='运动户外'"></ShopCard>
									<index-hot v-if="item.name=='运动户外'"></index-hot>
									<ShopCard title="推荐店铺" v-if="item.name=='运动户外'"></ShopCard>
			
			
									<!--推荐模块 轮框画图 urls 传递图片数组改变 -->
						
									<!-- <index-banner url="../../static/img/banner1.jpg"></index-banner> -->
									<index-icons v-if="item.name=='服饰内衣'"></index-icons >
								<ShopCard title="推荐店铺" v-if="item.name=='服饰内衣'"></ShopCard>
									<index-Shopper  v-if="item.name=='服饰内衣'"></index-Shopper>
				
			</block>
			</scroll-view>	
				</swiper-item>
			</swiper>
			
		
		</view>
	</view>
</template>

<script setup>
	
import ShopCard from '@/components/ShopCard/ShopCard.vue';
import Recommend from '@/components/Recommend/Recommend.vue';
import CardList from "@/components/CardList/CardList.vue";
	  import {
	    onLoad,
		onReady,
	    onShow
	  } from "@dcloudio/uni-app";
	
	import { reactive, ref,onMounted } from 'vue'
	 var onChangeTab=(e)=>{
		 // 从wipper 滑动视图的detail拿到索引
		 console.log("用户开始滑动页面",e.detail);
		 // 把滑块索引传递实现滑动改变top 索引  用户滑动那个区域对应顶部导航也跟着滑动
 		 addclick(e.detail.current);
	 };
	 //注意这里要弄成响应式 不然只会渲染一次 :scroll-into-view这个属性控制视图在几个
	 var topindex=ref(0);
	 // 滑动导航的索引,
	 var viewindex=ref("top0")
	 // swipper容器的默认高度
	 	var viewHeight = ref(0);
	  //获取刘海以及状态栏区域的剩余空间
	 var addclick=(index)=>{
		 console.log("用户点击了第几个tabbar",index);
		 // 索引改变用来判断当前样式是为否点击样式
		 topindex.value=index;
		 console.log(topindex),
		 // 视图跟顺点击改变
		 viewindex="top"+index;
	 };
	 var topBar=ref([]);
	 var urls=ref([]);
	 //获取刘海以及状态栏区域的空余显示区域
	const getDeviceHeight = () => {
				const res = uni.getSystemInfoSync();
				const system = res.platform;
				if( system ==='ios' ){
					return 44+res.statusBarHeight;
				}else if( system==='android' ){
					return 48+res.statusBarHeight;
				}else{
					return 0;
				}
				
			};
	 
var init=()=>{
	uni.request({
		url:"http://192.168.10.98:3000/api/index_list/data",
		success: (res) => {
			console.log("发送请求成功,这是返回值",res);
					var resdata=res.data.data;//响应体里面的数据 res.data是相应体一个code 还有个是data
					console.log("得到的滑动标题栏的值",resdata.topBar)
					topBar.value=resdata.topBar
					
					 console.log("得到各个模块的数据",resdata.data)
		},fail: (e) => {
			console.log(e)
		}
	})
};

       onLoad(()=>{
		   console.log("=============程序开始加载,初始化=================");
		     init();
		
		 
	   });
onReady(()=>{
	uni.getSystemInfo({
		success: (res) => {
			viewHeight.value = res.windowHeight - uni.upx2px(80)-getDeviceHeight();
		}
	})
})

	
</script>

<style scoped lang="scss">
.home{
	.wx-nav{
		.iconfont{
			// iconfont字体进行更改大小
			font-size: 26px; 
		}
		border-bottom: solid 1rpx #707070;
		background-color:#FFFFFF ;
		
		.left{
			
			margin-left: 30rpx;
		}
		.right{
			margin-right: 30rpx;
		}
		
		padding-bottom: 10rpx;
		margin-top: 80rpx;
		// 没写具体的高 差不多和底部导航栏一样·高合适
		height: 50rpx;
		        width: 100%;
		display: flex;
		justify-content: space-between;
		text-align: center;
		
	}
	// 滑块
	.scroll-content{
		width: 100%;
		height: 90rpx;
		// 空白空间不换行
		white-space: nowrap;
		.scroll-item{
			padding: 10rpx 30rpx;
			display: inline-block;
			font-size: 32rpx;
			.f-color-active{
				padding: 15rpx 0;
				border-bottom: 6rpx solid #2979ff;
			}
			
		}
		
		
	}
}

	
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/852526.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MySQL不知道密码，直接修改密码

MySQL不知道密码，直接修改密码

很简单&#xff0c;我们跳过验证&#xff0c;直接进去修改就好 修改配置文件 vim /etc/my.cnf在[mysqld]下直接添加配置 skip-grant-tables如图&#xff1a; 保存&#xff0c;退出即可。 重启服务 service mysqld restart进入MySQL #(直接点击回车&#xff0c;密码为空)…
阅读更多...
20230809在WIN10下使用python3将DOCX文件转换为TXT文件

20230809在WIN10下使用python3将DOCX文件转换为TXT文件

20230809在WIN10下使用python3将DOCX文件转换为TXT文件 2023/8/9 11:38 python docx txt https://blog.51cto.com/u_16175446/6620474 如何实现Python读取word内容转为TXT的具体操作步骤 如何实现Python读取word内容转为TXT的具体操作步骤 原创 mob649e81576de12023-07-04 14:0…
阅读更多...
伪原创文章生成器软件【php源码】

伪原创文章生成器软件【php源码】

这篇文章主要介绍了python怎么做gui界面&#xff0c;具有一定借鉴价值&#xff0c;需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获&#xff0c;下面让小编带着大家一起了解一下。 火车头采集ai伪原创插件截图&#xff1a; Author&#xff1a;Runsen 现在极少有人会用…
阅读更多...
Python入门【串行、并行与并发的区别、 进程、线程、协程的区别、线程是什么？ 、协程是什么？、同步和异步介绍、线程Thread 、守护线程】(二十三)

Python入门【串行、并行与并发的区别、 进程、线程、协程的区别、线程是什么？ 、协程是什么？、同步和异步介绍、线程Thread 、守护线程】(二十三)

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱敲代码的小王&#xff0c;CSDN博客博主,Python小白 &#x1f4d5;系列专栏&#xff1a;python入门到实战、Python爬虫开发、Python办公自动化、Python数据分析、Python前后端开发 &#x1f4e7;如果文章知识点有错误…
阅读更多...
小红书运营 从入门到精通

小红书运营 从入门到精通

大家好&#xff0c;我是网媒智星&#xff0c;今天跟大家分享一下小红书运营的经验&#xff0c;从入门到精通&#xff0c;一文读懂&#xff0c;全篇干货输出&#xff0c;非常实用。 一、注册账号 首先要说明一点&#xff0c;小红书与其他平台有所不同&#xff0c;因此具有特殊性…
阅读更多...
mysql二进制方式升级8.0.34

mysql二进制方式升级8.0.34

一、概述 mysql8.0.33 存在如下高危漏洞&#xff0c;需要通过升级版本修复漏洞 Oracle MySQL Cluster 安全漏洞(CVE-2023-0361) mysql/8.0.33 Apache Skywalking <8.3 SQL注入漏洞 二、查看mysql版本及安装包信息 [rootlocalhost mysql]# mysql -V mysql Ver 8.0.33 fo…
阅读更多...
做外贸受伤的并不总是你

做外贸受伤的并不总是你

外贸群里的小伙伴们经常吐槽&#xff1a; 小伙伴A 说&#xff1a;我前两天做一个PI&#xff0c;是新开发成功的一个客户。客户让我再次降价&#xff0c;我也同意了&#xff0c;刚刚客户反过来说&#xff0c;一再同意降价&#xff0c;是不是品质同时也变差了&#xff0c;应该怎…
阅读更多...
ORACLE19.8 RAC搭建ADG-主备都在原主机上 静态监听

ORACLE19.8 RAC搭建ADG-主备都在原主机上 静态监听

ORACLE19.8 RAC搭建ADG-主备都在原主机上配置关于PDB连接 标签&#xff1a; oracle19c 我们知道多租户环境下&#xff0c;pdb中建立的普通用户连接pdb需要通过tnsnames.ora或ezconnect的方式连接。而pdb的连接需要通过IP、端口和PDB服务名来连接&#xff0c;那么相同主机adg的…
阅读更多...
轻辙视觉引擎以多种AI算法工具，助力纺织行业断线检测智能识别

轻辙视觉引擎以多种AI算法工具，助力纺织行业断线检测智能识别

近年来&#xff0c;人工智能技术在各行各业的应用愈发广泛&#xff0c;机器视觉作为人工智能的重要分支&#xff0c;成为当下的研究热点。机器视觉技术的发展&#xff0c;大幅提升了工业、农业、医疗等领域的效率和精度。尤其在工业领域&#xff0c;随着智能制造的进一步发展&a…
阅读更多...
如何更改或伪装浏览器指纹？

如何更改或伪装浏览器指纹？

跨境出海经常会出现被某些网站“禁止访问”的情况&#xff0c;为什么呢&#xff1f;其中一部分原因就是因为你的浏览器制备被网站和在线平台识别到&#xff0c;从而得出设备和网络详细信息&#xff0c;从而禁止你的访问。这种独特的配置文件称为“浏览器指纹”&#xff0c;使网…
阅读更多...
艺术创作的新纪元：如何训练Lora模型打造令人惊叹的AI绘画

艺术创作的新纪元：如何训练Lora模型打造令人惊叹的AI绘画

目录 前言一、&#x1f981; 选择合适的云端平台1-1、云端平台的优势1-2、选择适合的云端平台 二、&#x1f981; 账号注册三、&#x1f981; 开始炼丹3-1、购买算力并创建工作空间3-2、启动工作空间3-3、应用市场一键安装 四、&#x1f981; 使用Stable-Diffusion作图4-1、国风…
阅读更多...
软考高项（八）项目整合管理 ★重点集萃★

软考高项（八）项目整合管理 ★重点集萃★

&#x1f451; 个人主页 &#x1f451; &#xff1a;&#x1f61c;&#x1f61c;&#x1f61c;Fish_Vast&#x1f61c;&#x1f61c;&#x1f61c; &#x1f41d; 个人格言 &#x1f41d; &#xff1a;&#x1f9d0;&#x1f9d0;&#x1f9d0;说到做到&#xff0c;言出必行&am…
阅读更多...
循环结构进阶

循环结构进阶

二重循环 import java.util.Scanner;public class Demo01 {public static void main(String[] args) {Scanner scanner new Scanner(System.in);// 二重循环 外循环班级 内循环学生for (int i1; i<3; i) { // 外循环班级System.out.println("请输入第" i "…
阅读更多...
WebDAV之π-Disk派盘+麻雀记

WebDAV之π-Disk派盘+麻雀记

麻雀记是一款专注个人记录的优秀软件。正所谓麻雀虽小五脏俱全，麻雀记app亦是如此，虽然这款软件非常的小巧，但是它的功能却非常的丰富强大。全新的Focus页面功能，可以将你置顶的笔记整合在一个页面中，然后结合番茄钟功能来实现专注功能，提高你的专注力与效率。同时还提供…
阅读更多...
原型设计工具大盘点：Figma VS 蓝湖 VS Axure VS 摹客

原型设计工具大盘点：Figma VS 蓝湖 VS Axure VS 摹客

从事互联网行业以来&#xff0c;我在很多平台都可以看到这样的问题&#xff1a;原型设计工具推荐有哪些&#xff1f;产品经理有什么好用的原型设计工具&#xff1f; 的确&#xff0c;原型设计工具在产品设计领域扮演着至关重要的角色&#xff0c;一款高效简单的原型工具对于产…
阅读更多...
基于低代码和数字孪生技术的电力运维平台设计

基于低代码和数字孪生技术的电力运维平台设计

电力能源服务商在为用能企业提供线上服务的时候&#xff0c;不可避免要面对用能企业的各种个性化需求。如果这些需求和想法都要靠平台厂家研发人员来实现&#xff0c;那在周期、成本、效果上都将是无法满足服务运营需要的&#xff0c;这也是目前很多线上能源云平台应用效果不理…
阅读更多...
仓储13代拣货标签操作指导

仓储13代拣货标签操作指导

服务器使用 V1.4基站已经内置服务程序&#xff0c;无需搭建服务&#xff1b;可跳至第1.4部分 服务器搭建 安装mysql5.7, 创建db_wms数据库并导入原始数据库文件 安装jdk1.8, 配置java环境变量 下载tomca8.0, 部署wms.war到tomcat, 并启动tomcat 下载资源 Windows 64bit:…
阅读更多...
汽车上的电源模式详解

汽车上的电源模式详解

① 一般根据钥匙孔开关的位置来确定整车用电类别&#xff0c;汽车上电源可以分为常电&#xff0c;IG电&#xff0c;ACC电 1&#xff09;常电。常电表示蓄电池和发电机输出直接供电&#xff0c;即使点火开关在OFF档时&#xff0c;也有电量供应。一般来讲模块的记忆电源及需要在车…
阅读更多...
spss--因子分析案例介绍

spss--因子分析案例介绍

这篇文章向大家介绍一个因子分析的实践操作案例。 这篇文章使用的数据集来自于一份问卷&#xff0c;数据集包括31个题目&#xff0c;178个观测&#xff08;因子分析对观测数有规定&#xff0c;一般要求观测的记录数为题目数量的5到10倍&#xff0c;至少5倍&#xff0c;此数据集…
阅读更多...
微服务学习笔记-基本概念

微服务学习笔记-基本概念

微服务是一种经过良好架构设计的分布式架构方案。根据业务功能对系统做拆分&#xff0c;每个业务功能模块作为独立项目开发&#xff0c;称为一个服务。 微服务的架构特征&#xff1a; 单一职责&#xff1a;微服务拆分粒度更小&#xff0c;每一个服务都对应唯一的业务能力&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023