uni-app|tabs滑动|uView 1.X|u-tabs-swiper全屏选项卡|案例

 template

<template>
	<view class="mainCont">
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper 
					bgColor=" #F5F5F5" 
					activeColor="#FF3229" 
					ref="tabs"
					:list="list"
					:current="current"
					@change="change"
					:is-scroll="false"
					swiperWidth="750"
					font-size="30rpx"
					barWidth="71"
					barHeight="6"
				></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent"                     
                @transition="transition" 
                @animationfinish="animationfinish">

			    <swiper-item class="swiper-item">
					<scroll-view scroll-y 
                        style="height: 100%;width: 100%;" 
                        @scrolltolower="reachBottom">
					    <view class="page-box">
						
                        <!--自定义内容-->                        
	
						</view>
					</scroll-view>
				</swiper-item>

				<swiper-item class="swiper-item">
					<scroll-view scroll-y 
                        style="height: 100%;width: 100%;" 
                        @scrolltolower="reachBottom">
					    <view class="page-box">
						
                        <!--自定义内容-->                        
	
						</view>
					</scroll-view>
				</swiper-item>
    
                <swiper-item class="swiper-item">
					<scroll-view scroll-y 
                        style="height: 100%;width: 100%;" 
                        @scrolltolower="reachBottom">
					    <view class="page-box">
						
                        <!--自定义内容-->                        
	
						</view>
					</scroll-view>
				</swiper-item>

                <swiper-item class="swiper-item">
					<scroll-view scroll-y 
                        style="height: 100%;width: 100%;" 
                        @scrolltolower="reachBottom">
					    <view class="page-box">
						
                        <!--自定义内容-->                        
	
						</view>
					</scroll-view>
				</swiper-item>

			</swiper>

            <view class="page-footer">
			    <view class="contract-button">
			    	<!-- 自定义底部栏（可选） -->
			    </view>
			</view>            

		</view>
	</view>
</template>

script

<script>
export default {
	data() {
		return {
			list: [
				{
					name: 'title-1'
				},
				{
					name: 'title-2'
				},
				{
					name: 'title-3'
				},
				{
					name: 'title-4',
				}
			],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
		};
	},
	onLoad() {

	},
	computed: {

	},
	methods: {
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		}
	}
};
</script>

 style

<style scoped lang="scss">
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
.mainCont {
	background: #F5F5F5;
}

// tabs framework config
.u-tabs-box {
	margin-bottom: 24rpx;
}

.page-box {
	width: 686rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	margin-left: 32rpx;
}

.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}

.swiper-box {
	flex: 1;
}

.swiper-item {
	height: 100%;
}

// footer config
.page-footer {
	width: 750rpx;
	height: 128rpx;
	background: #FFFFFF;
	box-shadow: 0rpx -4rpx 16rpx rgba(219,208,208,0.61);
	opacity: 1;
	border-radius: 0rpx;
	
	.contract-button {
		width: 686rpx;
		height: 80rpx;
		
		margin-top: 24rpx;
		margin-left: 32rpx;
		
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		
		text-align: center;
		
		line-height: 80rpx;
		color: #FFFFFF;
		letter-spacing: 5rpx;
		
		background: linear-gradient(137deg, #FF3229 0%, #FF7B59 100%);
		opacity: 1;
		border-radius: 40rpx;
	}
	
}
</style>

官方文档

uView 1.X tabs-swipe 组件