uniApp：Vue分页控制器，顶部选项卡

最新推荐文章于 2025-07-03 14:40:55 发布

原创最新推荐文章于 2025-07-03 14:40:55 发布 · 1.4k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

跨平台uni-app 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用Vue.js和uniApp构建一个带有顶部选项卡的分页控制器，包括滚动监听、选项卡切换及内容动态加载。通过实例展示了如何在页面上实现切换不同状态的列表视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniApp：Vue分页控制器，顶部选项卡

闲言碎语不要讲，直接看！

请添加图片描述

<template>
	<view class="container">

		<!-- 顶部选项卡 -->
		<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation
			:scroll-into-view="scrollInto">
			<view class="pagecontrol-top-title">
				<view v-for="(item,index) in itemsArr" :key="index" class="pagecontrol-top-text"
					@click="changeTab(index)" :id="'tab' + index">
					<view :class="tabIndex === index?'pagecontrol-top-selected':'pagecontrol-top-normal'">
						{{item}}
					</view>
					<view class="pagecontrol-bottom-line"
						:class="tabIndex === index?'pagecontrol-bottom-line-show':'pagecontrol-bottom-line-visibility'">
					</view>
				</view>
			</view>
		</scroll-view>

		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
			<swiper-item v-for="(item,index) in itemsArr" :key="index">
				<scroll-view scroll-y="true" show :style="'height:'+scrollH+'px;'" style="background-color: #F5F5F5;">

					<template v-if="true">
						<!-- 列表 -->
						<view v-for="(item2,index2) in 30" :key="index2">
							<!-- 列表样式 -->
							<!-- "(item,index) in Data" -->
							<view class="order-item">
								<view class="order-top-view">
									<view class="order-store-name">
										木北造型（十里河店）
									</view>
									<view class="order-status">
										已预约
									</view>
								</view>
								<view class="order-content">
									<view class="">
										<view class="order-name">
											服务名称：美容美发
										</view>
										<view class="order-date">
											服务日期：2022-02-17
										</view>

									</view>
									<view class="price">
										<text>￥</text>
										<text style="font-size: 18px;">77</text>
										<text style="font-size: 14px;">.50</text>
									</view>
								</view>
								<!-- 操作按钮 -->
								<view class="bottom-buttons">
									<view class="button-tag">
										删除
									</view>
									<view class="button-tag">
										取消
									</view>
									<view class="button-tag" style="background-color: #0abafa; color: white;">
										签到
									</view>
								</view>
							</view>
						</view>

					</template>
					<!-- 无数据 -->
					<template v-else>
						<fq-empty empty-text="暂无订单"></fq-empty>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				itemsArr: ['全部', '已预约', '已签到', '已完成'],
				tabIndex: 0,
				scrollInto: '',
				scrollH: 660,
			}
		},
		methods: {
			// 监听滑动
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
			// 切换选项
			changeTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index
				// 滚动到指定元素
				this.scrollInto = 'tab' + index
				// 获取当前分类下的列表数据

			},
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					console.log("wuwuFQ:", res)
					this.scrollH = res.windowHeight - 40
					// #ifdef MP
					this.scrollH -= 44
					// #endif
					console.log("wuwuFQ:", this.scrollH)
				}
			})
		}
	}
</script>

<style>
	.pagecontrol-top-scroll {
		height: 40px;
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
		border-bottom-color: #EDEDED;
	}

	.pagecontrol-top-title {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: space-around;
	}


	.pagecontrol-top-text {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.pagecontrol-top-normal {
		color: black;
		font-size: 16px;
	}

	.pagecontrol-top-selected {
		color: #0abafa;
		font-size: 17px;
	}

	.pagecontrol-bottom-line {
		width: 100%;
		height: 1px;
		margin-top: 2px;
		background-color: #0abafa;
	}

	.pagecontrol-bottom-line-show {
		visibility: visible;
	}

	.pagecontrol-bottom-line-visibility {
		visibility: hidden;
	}

	.order-item {
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 15rpx;
		margin: 15rpx;
	}

	.order-top-view {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.order-store-name {
		font-size: 16px;
		font-weight: 500;
	}

	.order-status {
		font-size: 12px;
		color: #A5A5A5;
	}

	.order-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.order-date {
		margin: 6rpx 0;
	}

	.bottom-buttons {
		margin-top: 10rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.button-tag {
		margin-left: 40rpx;
		height: 30px;
		line-height: 30px;
		padding: 0 20px;
		border-radius: 15px;
		color: #A5A5A5;
		border: 1px solid #EDEDED;
	}
</style>