uniapp 实现左右滑动切换页面

已于 2024-07-19 10:46:56 修改
阅读量1.5k 收藏 8
点赞数 16
文章标签： uni-app javascript vue.js
于 2024-07-19 10:35:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66809960/article/details/140541949
版权

实现效果：
在这里插入图片描述

方案一
方案一切换的是组件页面，适用于各种场景，但比较繁琐，不够简洁，不想看的小伙伴可直接看方案二！！
方案一vue3.0完整代码：

<template>
	<view>
		<view class="status_bar">
			<!-- 状态栏占位 -->
		</view>
		<view class="container">
			<!-- 搜索/导航 -->
			<view class="top">
				<view class="tabTop">
					<uni-icons type="search" size="30" color="#fff" style="padding-left: 30rpx;"></uni-icons>
					<view class="title">
						<text class="follow" @tap="onFollow" :style="clickFollowStyle">关注</text>
						<text class="square" @tap="onSquare" :style="clickSquareStyle">广场</text>
					</view>
				</view>
			</view>
 
			<!-- 广场 -->
			<view class="squareMain" v-if="isSquare===1">
				<!-- 导航栏 -->
				<view class="tabBar">
					<text v-for="(i,index) in tabBarData" :key="index" @tap="onclick(index)"
						:style="i.style">{{i.text}}</text>
				</view>
				<swiper :current="swiperIndex" style="height: calc(100vh - 260rpx);" @change=handelSwiper>
					<!-- 根据条件显示各个组件页面 -->
					<swiper-item>
						<find v-if="![1, 2, 3, 4, 5, 6].includes(swiperIndex)" />
					</swiper-item>
					<swiper-item>
						<city v-if="swiperIndex===1" />
					</swiper-item>
					<swiper-item>
						<walking v-if="swiperIndex===2" />
					</swiper-item>
					<swiper-item>
						<sea v-if="swiperIndex===3" />
					</swiper-item>
					<swiper-item>
						<play v-if="swiperIndex===4" />
					</swiper-item>
					<swiper-item>
						<hotel v-if="swiperIndex===5" />
					</swiper-item>
					<swiper-item>
						<delicious v-if="swiperIndex===6" />
					</swiper-item>
				</swiper>
			</view>
			<!-- 关注 -->
			<view class="followMain" v-else>
				<follow />
			</view>
		</view>
	</view>
</template>
 
<script setup>
	import {
		ref,
		watch,
		onMounted,
	} from "vue";
 
	// 导入页面组件
	import find from "../../pages/community/find.vue"
	import city from "../../pages/community/city.vue"
	import walking from "../../pages/community/walking.vue"
	import sea from "../../pages/community/sea.vue"
	import play from "../../pages/community/play.vue"
	import hotel from "../../pages/community/hotel.vue"
	import delicious from "../../pages/community/delicious.vue"
	import follow from "../../pages/community/follow/follow.vue"
 
	//控制“关注”和“广场”
	const isSquare = ref(1)
	const clickFollowStyle = ref('color: #FFF;');
	const clickSquareStyle = ref('color: #7e9de2;')
	const onFollow = () => {
		isSquare.value = 0;
		clickFollowStyle.value = 'color: #7e9de2;';
		clickSquareStyle.value = 'color: #FFF;';
	}
	const onSquare = () => {
		isSquare.value = 1
		clickSquareStyle.value = 'color: #7e9de2;';
		clickFollowStyle.value = 'color: #FFF;';
	}
 
	const fold = ref("展开")
	
	// 广场导航
	const tabBarData = ref([{
			text: '发现',
			style: 'color:#7e9de2;border-bottom: 2px solid #7e9de2;'
		},
		{
			text: '城市',
			style: 'color: #fff;'
		},
		{
			text: '徒步',
			style: 'color: #fff;'
		},
		{
			text: '看海',
			style: 'color: #fff;'
		},
		{
			text: '玩乐',
			style: 'color: #fff;'
		},
		{
			text: '酒店',
			style: 'color: #fff;'
		},
		{
			text: '美食',
			style: 'color: #fff;'
		},
	])
 
	// 获取当前页面路径信息
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	console.log('当前页面路径：', currentPage.route)
 
	// 滑动触发导航
	const swiperIndex = ref()
	const handelSwiper = (e) => {
		console.log(e.detail.current);
		swiperIndex.value = e.detail.current
		// 导航初始样式
		tabBarData.value.forEach((item, i) => {
			item.style = 'color: #fff;';
		});
		// 滑动导航的样式
		tabBarData.value[e.detail.current].style =
			'color:#7e9de2;border-bottom: 2px solid #7e9de2;font - size: large;';
	}
 
	// 点击触发导航
	const tabIndex = ref()
	const onclick = (index) => {
		console.log(index);
		tabIndex.value = index
		swiperIndex.value = tabIndex.value
		// 导航初始样式
		tabBarData.value.forEach((item, i) => {
			item.style = 'color: #fff;';
		});
		// 点击导航后的样式
		tabBarData.value[index].style = 'color: #7e9de2;border-bottom: 2px solid #7e9de2;font - size: large;';
	}
</script>
 
<style scoped lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
 
	.container {
		.top {
			position: fixed;
			top: var(--status-bar-height);
			margin-bottom: 10px;
 
			.tabTop {
				display: flex;
				width: 100vw;
				font-size: 40rpx;
				display: flex;
				align-items: center;
				margin-top: 10px;
 
				.title {
					flex: 1;
					text-align: center;
					padding: 18rpx 0;
 
					.follow {
						display: inline;
						margin: 0 30rpx 0 -90rpx
					}
				}
			}
		}
 
		.squareMain {
			.tabBar {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 10px 0;
 
				text {
					display: block;
					padding-bottom: 2px;
				}
			}
 
			position: fixed;
			width: 100vw;
			margin-top: 130rpx;
		}
 
		.followMain {
			position: static;
			margin-top: 130rpx;
		}
	}
</style>

方案二
这个方案是我在看其他博主写的文章时借鉴的思想，比较简练，该博主文章链接：
该文章链接http://t.csdnimg.cn/by5F0
方案二vue3.0完整代码：

<template>
	<view class="status_bar">
		<!-- 状态栏占位 -->
	</view>
	<view class="tabs-container">
		<view v-for="(tab, index) in tabList" :key="index" @tap="tabsOn(index)" :class="{ active: tabsId === index }"
			class="tab">{{ tab.title }}</view>
	</view>
	<swiper @change="slideOn" :current="tabsId">
		<swiper-item v-for="(tab, index) in tabList" :key="index">
			<view>{{ tab.title }} content</view>
		</swiper-item>
	</swiper>
</template>
 
<script setup>
	import {
		ref
	} from 'vue';
 
	const tabList = [{
			title: "发现",
			index: "0"
		},
		{
			title: "城市",
			index: "1"
		},
		{
			title: "徒步",
			index: "2"
		},
		{
			title: "看海",
			index: "3"
		},
		{
			title: "玩乐",
			index: "4"
		},
		{
			title: "酒店",
			index: "5"
		},
		{
			title: "美食",
			index: "6"
		}
	];
 
	const tabsId = ref(0);
 
	const slideOn = (e) => {
		tabsId.value = e.detail.current;
	};
 
	const tabsOn = (index) => {
		tabsId.value = index;
	};
</script>
 
<style scoped lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
 
	.tabs-container {
		display: flex;
		justify-content: space-between;
		padding: 20px;
 
		.tab {
			padding: 10px;
		}
 
		.active {
			color: #7e9de2;
		}
	}
</style>

方案二vue2.0完整代码

<template>
	<view class="">
		<view class="status_bar">
			<!-- 状态栏占位 -->
		</view>
		<view class="tabs-container">
			<view v-for="(tab, index) in tabList" :key="index" @tap="tabsOn(index)"
				:class="{ active: tabsId === index }" class="tab">{{ tab.title }}</view>
		</view>
		<swiper @change="slideOn" :current="tabsId">
			<swiper-item v-for="(tab, index) in contentList" :key="index">
				<view>{{ tab.content }} </view>
			</swiper-item>
		</swiper>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						title: "发现",
						index: "0"
					},
					{
						title: "城市",
						index: "1"
					},
					{
						title: "徒步",
						index: "2"
					},
					{
						title: "看海",
						index: "3"
					},
					{
						title: "逛街",
						index: "4"
					},
					{
						title: "酒店",
						index: "5"
					},
					{
						title: "美食",
						index: "6"
					}
				],
				contentList:[
					{
					content:'sdfsdfsdfsdf'
				    },
					{
					content:'sdfsdfsdfsdf'
					},
					{
					content:'sdfsdfsdfsdf'
					},
					{
					content:'sdfsdfsdfsdf'
					},
					{
					content:'sdfsdfsdfsdf'
					},
					{
					content:'sdfsdfsdfsdf'
					},
					{
					content:''
					},
					
				],
				tabsId:0,
			}
		},
		methods:{
			slideOn(e){
				this.tabsId = e.detail.current;
			},
			tabsOn(index){
				this.tabsId = index;
			}
		}
	}

</script>

<style scoped lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.tabs-container {
		display: flex;
		justify-content: space-between;
		padding: 20px;

		.tab {
			padding: 10px;
		}

		.active {
			color: #7e9de2;
		}
	}
</style>

最后效果图

在这里插入图片描述

另外还可以通过scroll-view实现触底加载，以及下拉刷新

蒜苔肉丝
关注
uni-app实现滑动切换效果
weixin_59702843的博客
06-18 9018
uni-app框架了解实现一个滚动切换tab效果，这个很常见的一个效果，最后封装成一个组件，便于之后使用，写这个须要引入uni官方提供的uni.css样式，用到了写好的样式，就不须要本身写了css
仿探探左右滑动切换图片效果
08-14
探探那个左右滑动效果很好玩，这个高仿效果杠杠的，保证能运行，仅供大家学习交流使用
uniapp 左右滚动
最新发布
qq_33240556的博客
08-05 882
这些工具各有优势，选择时可以根据个人的需求和偏好来决定。例如，如果你更倾向于一个图形化的界面，那么Remmina或SecureCRT可能是更好的选择。而如果你需要一个轻量级的工具，PuTTY则是一个不错的选择。对于跨平台支持的需求，WindTerm或FinalShell可能更加合适。对于Linux运维工作而言，远程连接工具是非常重要的。希望这些信息对你有帮助！如果你需要了解某一款工具的具体使用方法或者有其他问题，请随时告诉我。
uniapp 页面左右滑动切换tab
m0_61702149的博客
08-22 3260
uniapp 左右滑动 切换内容
uniapp实现页面左滑右滑切换内容
weixin_44801790的博客
01-22 2661
uniapp实现页面左滑右滑切换内容: 使用uniapp的swiper和uview的tabs标签组合实现
uniapp 左右滑动切换内容
世 间 尤 物，不 敢 妄 取
01-02 1110
/ console.log("上拉")// console.log("下拉")// 如果等于0 有别的需求(比如网络请求啥的都可以写)// console.log("触摸开始")// console.log("触摸结束")//这里我没用到上啦下拉，就注释了。//点击 tab切换。
小白总结uniapp自定义导航栏（可点击可左右滑动切换页面）
m0_69848498的博客
04-13 2284
uniapp超简单自定义导航栏实现点击滑动切换，适合新手小白
uniapp 左右滑动切换页面并切换tab
m0_58135258的博客
08-10 8135
uniapp 左右滑动切换页面并切换tab
uniapp -- 滑动页面切换(兼容微信小程序)
m0_72951245的博客
08-04 4307
（先声明哦我可不是偷懒，只是想学术借鉴一下）因为最近有在做左右滑动功能，秉持着能 ctrl+c 绝不动脑子的原则，开始了我的一顿操作，结果很明显没找到，言归正传，上代码。
uni-app滑动切换页面
qq_43351249的博客
10-09 1038
<template> <view class="big"> <view class="trade"> <block v-for="(item, index) in tabBars" :key="item.id"> <view class="texts" :class="curr == index ? 'active' : ''" :data-index="index" @click="setCurr"> {{it
【uniapp小程序】使用swiper实现页面内部左右滑动的切换
qq_57219457的博客
08-23 6198
uniapp小程序页面内滚动、方便自己cv
实现底部切换标签+左右滑动切换页面
12-10
最近开始了一个新的手机App项目，需要用到底部切换标签和左右滑动切换页面功能，做了个DEMO分享给大家，如果有什么错误希望大家指出，谢谢！
uniapp 仿抖音上下滑动视频.zip
03-12
本项目是基于uniapp实现的一个仿抖音的上下滑动视频功能，旨在提供一个类似的用户体验，让用户可以轻松地浏览和切换短视频。 一、uniapp框架详解 1. uniapp基础：uniapp是DCloud（即海豚浏览器开发者）推出的一款...
uniapp实现左右滑动切换页面
05-10
要实现左右滑动切换页面，可以使用uni-app提供的swiper组件，具体步骤如下： 1. 在页面中添加swiper组件： ```html <!-- 第1个页面内容 --> <!-- 第2个页面内容 --> <!-- 第3个页面内容 --> ``` ...
Uniapp实现滑动页面tab的切换
qq_44127479的博客
11-16 2198
Uniapp实现滑动页面tab的切换
uniapp实现左右滑动切换
l_z__的博客
11-11 8320
在页面中 <view @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"> //这里放需要滑动的区域 </view> 在script中 data() { return { startX: 0, //滑动开始x轴位置 startY: 0, //滑动开始y轴位置 moveX: 0, //滑动的x轴距离 moveY: 0, //滑动的y轴距离 like_state: 0, //-1
uni-app使用scrollview+swiper实现滑动切换页面功能
yyxhzdm的博客
07-28 4551
效果图： 一、创建自定义组件scrollbar.vue <template> <view class="uni-tab-bar"> <scroll-view class="uni-swiper-tab" scroll-x="true"> <block v-for="(tab,index) in tabBars" :style="scrollStyle"> <view...
uniapp 左右滑动模块/页面
weixin_47168811的博客
08-28 1639
uniapp 左右滑动模块/页面，头部导航栏点击切换
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蒜苔肉丝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值