uni-app 选项卡 swiper点击切换可滑动切换页面

最新推荐文章于 2024-08-05 21:09:49 发布

粉毛桃子

最新推荐文章于 2024-08-05 21:09:49 发布

阅读量2.3k

点赞数

分类专栏： uniapp 文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/weixin_50538763/article/details/127007598

版权

本文介绍了如何在uni-app中创建一个既支持点击也支持滑动切换的选项卡页面，通过结合swiper组件，实现了灵活的页面切换交互效果。

摘要由CSDN通过智能技术生成

uniapp选项卡可点击切换可左右滑动切换

在这里插入图片描述

<template>
	<view class="big">
		<view class="trade">
			<view class="texts" :class="curr==0?'active':''" data-index="0" @tap="setCurr">
				第一个页面
			</view>
			<view class="texts" :class="curr==1?'active':''" data-index="1" @tap="setCurr">
				第二个页面
			</view>
			<view class="texts" :class="curr==2?'active':''" data-index="2" @tap="setCurr">
				第三个页面
			</view>
		</view>
		<swiper style="height: 100vh;" :current="curr" @change="setCurr">
			<swiper-item&g