uniapp组件之tab选项卡滑动切换功能实现 vue2版本+vue3版本

8 篇文章 0 订阅

uniapp组件之tab选项卡滑动切换功能实现,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

vue2版本

uniapp组件之tab选项卡滑动切换

效果如下:
在这里插入图片描述
代码如下:

<template>
	<view class="content">
		<view class="nav">
			<!-- 选项卡水平方向滑动,scroll-with-animation是滑动到下一个选项时,有一个延时效果 -->
			<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tab-scroll_box">
					<!-- 选项卡类别列表 -->
					<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"  :class="{'active':isActive==index}" @click="chenked(index)">
							{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 选项卡内容轮播滑动显示,current为当前第几个swiper子项 -->
		<swiper @change="change" :current="isActive" class="swiper-content" :style="fullHeight">
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item" >
						选项卡1页面
					</view>
				</scroll-view>	
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item" >
						选项卡2页面
					</view>
				</scroll-view>	
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item" >
						选项卡3页面
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item" >
						选项卡4页面
					</view>
				</scroll-view>	
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item" >
						选项卡5页面
				    </view>
				</scroll-view>	
			</swiper-item>
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item" >
						选项卡6页面
				    </view>
				</scroll-view>	
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		watch:{
			// swiper与上面选项卡联动
			currentindex(newval){
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后,每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
		},
		data() {	
			return {
				isActive: 0,
				index: 0,
				currentindex:0,
				category:[
					{
						id:1,
						name:'选项卡一',
					},
					{
						id:2,
						name:'选项卡二',
					},
					{
						id:3,
						name:'选项卡三',
					},
					{
						id:4,
						name:'选项卡四',
					},
					{
						id:5,
						name:'选项卡五',
					},
					{
						id:6,
						name:'选项卡六',
					},
				],
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight:"",	
			}
		},
		mounted() {
			var that = this;
			 //获取手机屏幕的高度,让其等于swiper的高度,从而使屏幕充满
			uni.getSystemInfo({
			      success: function (res) {
				         that.fullHeight ="height:" + res.windowHeight + "px";
				  }
				});
			// 获取标题区域宽度,和每个子元素节点的宽度
			this.getScrollW()
		},
		methods: {
			// 获取标题区域宽度,和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.category[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.category[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示,子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时,获取其索引,也就是第几个
			change(e){
				const {current} = e.detail;
				this.currentindex = current;
			},	
		}
	}
</script>
<style lang="scss">
	page{
		height: 100%;
		display: flex;
		background-color: #FFFFFF;
	}
	.content{
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		.nav{
			border-top: 1rpx solid #f2f2f2;
			background-color: #fceeee;	
			position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			height: 100rpx;
			.tab-scroll{
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;
				.tab-scroll_box{
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;
					.tab-scroll_item{
						line-height: 60rpx;
						margin-right: 35rpx;
						flex-shrink: 0;
						padding-bottom:10px;
						display: flex;
						justify-content: center;
						font-size: 16px;
						padding-top: 10px;
					}
				}
			}
		}
		.swiper-content{
			   padding-top: 120rpx;
			   flex: 1;
			.swiperitem-content{
			    background-color: #ffffff;
				.nav_item{	
					background-color: #FFFFFF;
					padding:20rpx 40rpx 0rpx 40rpx ;
				}
			}
		}	
	}
	.active {
		position: relative;
		color: #ff0000;
		font-weight: 600;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 130rpx;
		height: 4rpx;
		background-color: #ff0000;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	/* 隐藏滚动条,但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
</style>

注意:css当中需要加上以下,为了隐藏滚动条,否则会出现下图效果

/* 隐藏滚动条,但依旧具备可以滚动的功能 */
 
/deep/.uni-scroll-view::-webkit-scrollbar {
 
display: none
 
}

补充:uniapp实现tabs切换(可滑动)

uniapp实现tabs切换(可滑动)

在这里插入图片描述
在这里插入图片描述
完整代码

<template>
	<view class="body-view">
		<!-- 使用scroll-view实现tabs滑动切换 -->
		<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
			<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)" @click="swichMenu(item.id - 1)">
				<view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
					<text class="menu-topic-text">{{item.name}}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 内容 -->
		<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
			<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
				<view class="swiper-item">
					{{item.content}}
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						id: 1,
						name: '推荐'
					},
					{
						id: 2,
						name: '交通交通'
					},
					{
						id: 3,
						name: '住房'
					},
					{
						id: 4,
						name: '社会保障'
					},
					{
						id: 5,
						name: '民生热点'
					},
					{
						id: 6,
						name: '即日头条'
					},
					{
						id: 7,
						name: '新闻联播'
					},
				],
				currentTab: 0,
				tabCurrent: 'tabNum1',
				// Tab切换内容
				swiperDateList: [{
						id: 1,
						content: '推荐'
					},
					{
						id: 2,
						content: '交通交通'
					},
					{
						id: 3,
						content: '住房'
					},
					{
						id: 4,
						content: '社会保障'
					},
					{
						id: 5,
						content: '民生热点'
					},
					{
						id: 6,
						content: '即日头条'
					},
					{
						id: 7,
						content: '新闻联播'
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
			swichMenu(id) {
				this.currentTab = id
				console.log(11,id)
				this.tabCurrent = 'tabNum'+ id
			},
			swiperChange(e) {
				console.log(22,e.detail.current)
				let index = e.detail.current
				this.swichMenu(index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.body-view {
		height: 100vh;
		width: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		align-items: flex-start;
		justify-content: center;
	}

	.top-menu-view {
		display: flex;
		position: fixed;
		top: 100rpx;
		left: 0;
		white-space: nowrap;
		width: 100%;
		background-color: #FFFFFF;
		height: 86rpx;
		line-height: 86rpx;
		border-top: 1rpx solid #d8dbe6;

		.menu-topic-view {
			display: inline-block;
			white-space: nowrap;
			height: 86rpx;
			position: relative;

			.menu-topic-text {
				font-size: 30rpx;
				color: #303133;
				padding: 10rpx 40rpx;
			}

			// .menu-topic-act {
			// 	margin-left: 30upx;
			// 	margin-right: 10upx;
			// 	position: relative;
			// 	height: 100%;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// }

			.menu-topic-bottom {
				position: absolute;
				bottom: 0;
				width: 100%;

				.menu-topic-bottom-color {
					width: 40rpx;
					height: 4rpx;
				}
			}

			.menu-topic-act .menu-topic-bottom {
				display: flex;
				justify-content: center;
			}

			.menu-topic-act .menu-topic-bottom-color {
				background: #3d7eff;
			}



		}


	}

	.swiper-box-list {
		width: 100%;
		padding-top: 200rpx;
		flex:1;
		background-color: #FFFFFF;
		.swiper-topic-list {
		     width: 100%;
		 }
	}
</style>

vue3版本

<template>
  <div class="body-view">
    <!-- 使用scroll-view实现tabs滑动切换 -->
    <scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
      <div class="menu-topic-view" v-for="item in tabs" :id="'tabNum' + item.id" :key="(item.id - 1)" @click="switchMenu(item.id - 1)">
        <div :class="currentTab === (item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
          <span class="menu-topic-text">{{ item.name }}</span>
          <div class="menu-topic-bottom">
            <div class="menu-topic-bottom-color"></div>
          </div>
        </div>
      </div>
    </scroll-view>
    <!-- 内容 -->
    <swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
      <swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
        <div class="swiper-item">
          {{ item.content }}
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const tabs = ref<any>([
  { id: 1, name: '推荐' },
  { id: 2, name: '交通交通' },
  { id: 3, name: '住房' },
  { id: 4, name: '社会保障' },
  { id: 5, name: '民生热点' },
  { id: 6, name: '即日头条' },
  { id: 7, name: '新闻联播' },
])

const currentTab = ref(0);
const tabCurrent = ref('tabNum1');

const swiperDateList = ref<any>([
  { id: 1, content: '推荐' },
  { id: 2, content: '交通交通' },
  { id: 3, content: '住房' },
  { id: 4, content: '社会保障' },
  { id: 5, content: '民生热点' },
  { id: 6, content: '即日头条' },
  { id: 7, content: '新闻联播' },
])

const switchMenu = (id: number) => {
  currentTab.value = id;
  console.log(11, id);
  tabCurrent.value = 'tabNum' + id;
};

const swiperChange = (e: { detail: { current: number } }) => {
  console.log(22, e.detail.current);
  const index = e.detail.current;
  switchMenu(index);
};

onMounted(() => {
  // Perform any initialization logic here
});
</script>

<style scoped lang="scss">
.body-view {
  height: 100vh;
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  align-items: flex-start;
  justify-content: center;
}

.top-menu-view {
  display: flex;
  position: fixed;
  top: 100rpx;
  left: 0;
  white-space: nowrap;
  width: 100%;
  background-color: #FFFFFF;
  height: 86rpx;
  line-height: 86rpx;
  border-top: 1rpx solid #d8dbe6;

  .menu-topic-view {
    display: inline-block;
    white-space: nowrap;
    height: 86rpx;
    position: relative;

    .menu-topic-text {
      font-size: 30rpx;
      color: #303133;
      padding: 10rpx 40rpx;
    }

    .menu-topic-bottom {
      position: absolute;
      bottom: 0;
      width: 100%;

      .menu-topic-bottom-color {
        width: 40rpx;
        height: 4rpx;
      }
    }

    .menu-topic-act .menu-topic-bottom {
      display: flex;
      justify-content: center;
    }

    .menu-topic-act .menu-topic-bottom-color {
      background: #3d7eff;
    }
  }
}

.swiper-box-list {
  width: 100%;
  padding-top: 200rpx;
  flex: 1;

  .swiper-topic-list {
    width: 100%;
  }
}
</style>

继续加油呀~

到此这篇关于uniapp组件之tab选项卡滑动切换的文章就介绍到这了,更多相关uniapp tab选项卡滑动切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

转载:https://www.jb51.net/article/273904.htm#_label0
侵权系删

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 您好!如果我理解正确的话,您的问题是如何通过uniApp实现在点击tab选项卡时显示相关数据的功能,对吗? 在uniApp中,您可以使用组件实现这个功能。具体而言,您可以使用 `uni-TabBar` 组件和 `uni-TabBarItem` 组件来创建一个选项卡布局。然后,您可以在每个选项卡上放置一个页面,用于显示相关数据。 以下是一些示例代码,帮助您实现这个功能: ``` <!-- 在 pages/index/index.vue 中 --> <template> <view class="container"> <uni-tab-bar :active="active" @click="onTabClick"> <uni-tab-bar-item title="选项卡一" icon="home"> <view> <text>这是选项卡一的内容</text> </view> </uni-tab-bar-item> <uni-tab-bar-item title="选项卡二" icon="search"> <view> <text>这是选项卡二的内容</text> </view> </uni-tab-bar-item> <uni-tab-bar-item title="选项卡三" icon="setting"> <view> <text>这是选项卡三的内容</text> </view> </uni-tab-bar-item> </uni-tab-bar> </view> </template> <script> export default { data() { return { active: 0 } }, methods: { onTabClick(index) { this.active = index; } } } </script> ``` 在上面的示例代码中,我们使用了 `uni-tab-bar` 组件和 `uni-tab-bar-item` 组件来创建了一个带有三个选项卡的布局。在每个选项卡中,我们放置了一个 `view` 组件,并在其中显示了相应的文本。 此外,我们还通过 `@click` 事件监听器来实现了点击选项卡时更新 `active` 数据的功能。通过更新 `active` 数据,我们可以让页面显示相应选项卡中的内容。 希望这个回答能够帮助到您!如果您还有其他问题,请随时提问。 ### 回答2: uni-app是一个跨平台的开发框架,可以同时构建iOS和安卓应用,并且可以在H5和小程序平台上运行。实现点击tab选项卡展现该状态的数据,可以通过以下步骤来实现: 1. 在uni-app的页面中,使用tab组件来创建选项卡。可以根据自己的需求来设置选项卡的数量和文本内容,同时可以绑定一个变量来标识当前选中的选项卡。 2. 在每个选项卡对应的页面中,可以绑定不同的数据状态。可以通过在data中定义不同的变量来存储不同状态下的数据。例如可以定义一个变量data1来存储选项卡1的数据,data2来存储选项卡2的数据,以此类推。 3. 在点击选项卡时,可以通过事件监听来切换选项卡的状态。可以在每个选项卡对应的页面中定义一个方法,当选项卡被点击时,调用这个方法来改变变量的值,从而切换选项卡的状态。 4. 根据选项卡的状态,可以在页面中显示对应状态下的数据。可以通过条件判断来展示不同状态下的数据。例如可以使用v-if指令来判断当前选项卡的状态,然后根据状态来展示不同的数据。 通过以上步骤,我们可以实现点击tab选项卡展示该状态的数据。根据不同选项卡的状态,可以在页面中展示对应状态下的数据,从而满足不同业务需求。uni-app的跨平台特性使得我们可以快速开发并在多个平台上运行应用,方便开发者进行应用的功能实现和优化。 ### 回答3: uniApp是一种基于Vue.js的跨平台开发框架,可以用于开发多个平台的应用程序。在uniApp中,可以通过使用tab选项卡组件来展现不同状态的数据。 首先,我们需要在uniApp的页面中引入tab选项卡组件,并设置相关的属性和事件。在引入组件之后,我们可以使用v-for指令来遍历数据列表,并将每个选项卡的标题和内容与相应的数据绑定。例如: <template> <view> <uni-tabs v-model="activeTab" :tabs="tabs" @change="handleChange"> <uni-tab-pain v-for="(item, index) in tabs" :key="index" :label="item.label"> <view>{{ item.content }}</view> </uni-tab-pain> </uni-tabs> </view> </template> <script> export default { data() { return { activeTab: 0, // 默认选中的选项卡索引 tabs: [ // 选项卡列表数据 { label: '状态1', content: '状态1的数据内容' }, { label: '状态2', content: '状态2的数据内容' }, { label: '状态3', content: '状态3的数据内容' } ] } }, methods: { handleChange(index) { console.log('当前选项卡索引:', index) // 根据index获取对应的状态数据 // 更新页面中展示的数据 } } } </script> 在页面中,我们使用了uni-tabs和uni-tab-pain两个组件实现选项卡的效果。uni-tabs是整个选项卡组的容器,而uni-tab-pain是每个选项卡的内容区域。 在data中,我们定义了activeTab来标识当前选中的选项卡索引,同时定义了tabs数组来存储所有选项卡的数据。 在methods中,我们定义了handleChange方法来处理选项卡切换事件。在切换选项卡时,handleChange方法会被触发,并接收当前选项卡的索引作为参数。我们可以根据这个索引获取对应的状态数据,并更新页面中展示的数据内容。 总结一下,通过使用uniApptab选项卡组件,我们可以实现点击选项卡展现不同状态的数据。在切换选项卡时,可以通过事件处理方法来更新页面中展示的数据内容。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值