uniapp 左右滑动模块/页面

实现效果

 头部点击可以切换 下面内容区；左右滑动内容区，头部随之变化

样式自己按需修改

 代码如下：

<template>
	<view class="container">

		<view class="tabss-box" @click="changeTab(index)" v-for="(item,index) in tabss"
			:style="{color:currentTab==index?'blue':'black'}">
			{{item}}
		</view>

		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lowerBot" scroll-with-animation>
					<view :id="'top'+listIndex"
						style="width: 100%;height: 180rpx;line-height: 180rpx;background-color: #eee;">随便给的边距</view>
					<view class='content'>
						<view v-if="listIndex == 0">
							第一页第一页第一页第一页第一页第一页第一页第一页第一页第一页
							<view class='card' v-for="(item,index) in listItem" v-if="listItem.length > 0" :key="index">
								{{item}}
							</view>
						</view>
						<view v-if="listIndex == 1">
							第二页第二页第二页第二页第二页第二页第二页第二页第二页第二页
							<view class="" v-for="item in 3">
								<!-- mode="widthFix" 图片宽度固定，高度随着图片大小等比例显示 -->
								<image style="width: 300rpx;" src="@/static/logo.png" mode="widthFix"></image>
							</view>
						</view>

					</view>
					<view class='noCard' v-if="listItem.length===0">
						暂无信息
					</view>
					<view style="width: 100%;height: 100rpx;opacity:0;">底部占位盒子</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabss: ['头部1', '头部2'],
				isX: 0, //放在store统一管理
				isY: 999, //放在store统一管理
				tabTitle: ['选择一', '选择二', '选择三', '选择四'], //导航栏格式 --导航栏组件
				currentTab: 0, //sweiper所在页
				pages: [1, 1, 1, 1], //第几个swiper的第几页
				list: [
					[1, 2, 3, 4, 5, 6],
					['a', 'b', 'c', 'd', 'e', 'f'],
					[],
					['2233', '4234', '13144', '324244']
				] //数据格式
			};
		},
		onLoad(e) {

		},
		onShow() {},
		onHide() {},
		methods: {

			changeTab(index) {
				this.currentTab = index
			},
			
			
			// swiper 滑动
			swiperTab: function(e) {
				var index = e.detail.current //获取索引
				this.currentTab = e.detail.current
				// this.$refs.navTab.longClick(index);
			},
			lowerBot() {
				console.log('到底');
			},

		}
	};
</script>

<style lang="scss" scoped>
	.addBtnBox {
		position: fixed;
		z-index: 900;
		width: 140rpx;
		align-items: flex-end;
		justify-content: center;
		height: 140rpx;
		display: flex;

		.addBtn {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			color: white;
			font-size: 10px;
			font-weight: bold;
			background: #444857;
			line-height: 100rpx;
			text-align: center;
			box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
		}
	}

	.container {
		width: 100vw;
		font-size: 28rpx;
		min-height: 100vh;
		overflow: hidden;
		color: #6B8082;
		position: relative;
		background-color: #f6f6f6;
	}

	.content {
		width: 100%;
	}

	.card {
		width: 90%;
		height: 368rpx;
		background-color: white;
		margin: 0 auto 42rpx auto;
		background: #FFFFFF;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
		border-radius: 5px;
		position: relative;
	}

	.noCard {
		width: 90%;
		height: 200rpx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10rpx;
	}


	.nav {
		position: fixed;
		left: 0;
		top: 0;
		color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 24rpx;
		background-color: #3ABAFB;
		z-index: 996;
	}

	.searchInput999 {
		width: 90%;
		margin: 0 auto;
		background: white;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56rpx;
	}

	.search999 {
		width: 32rpx;
		height: 32rpx;
	}

	.searchBox999 {
		width: 56rpx;
		height: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input999 {
		color: #999;
		width: 80%;
	}
</style>