xietang-school-wx/pages/menu/menu.vue

<template>
	<z-paging-swiper class="wrap">
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
		<template #top>
			<view class="navBarBox" :style="{height:navBarBoxHeight+'rpx'}">
				<!-- 状态栏占位 -->
				<view class="statusBar" :style="{paddingTop: statusBarHeight+'px'}"></view>
				<!-- 真正的导航栏内容 -->
				<view class="navBar">
					<view class="back" @click="goback">
						<u-icon name="arrow-left"></u-icon>
					</view>
					<view>{{menutitle}}</view>
				</view>
			</view>
			<view>
				<z-tabs ref="tabs" :active-style="activeStyle" :inactive-style="nomalStyle" :scroll-count="2"
					:list="tabList" :current="current" @change="tabsChange" />
			</view>
		</template>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" :current="current" @transition="swiperTransition"
			@animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
				<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
				<swiper-list-item ref="listItem" :tabIndex="index" :currentIndex="current"></swiper-list-item>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script>
	import swiperListItem from "./components/swiper-list-item.vue"
	import zTabs from "@/components/z-tabs/z-tabs.vue"
	export default {
		components: {
			zTabs,
			swiperListItem
		},
		data() {
			return {
				navBarBoxHeight: 0,
				statusBarHeight: 40,
				menutitle: '课件绘编',
				tabList: [{
					'name': '测试111111111111111111'
				}, {
					'name': '测试2'
				}, {
					'name': '测试3'
				}, {
					'name': '测试4'
				}, {
					'name': '测试5'
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				nomalStyle: {



				},
				activeStyle: {
					color: '#fff',
					background: '#de242f',

				}
			}
		},
		onLoad() {
			// this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			this.navBarBoxHeight = 80 + this.statusBarHeight * 2
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			toDetail(id) {

			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			// swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			// swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			},
			// 如果要通知当前展示的z-paging刷新，请调用此方法
			reloadCurrentList() {
				this.$refs.listItem[this.current].reload();
			}
		}
	}
</script>

<style lang="scss">

	.wrap {
		.navBarBox {
			// position: fixed;
			// top: 0;
			// left: 0;
			// z-index: 999;
			width: 100%;

			padding: 0 20rpx;
			background: linear-gradient(to right, #da212d, #f96666);
			margin-bottom:24rpx;
			.navBar {
				color: #fff;
				font-size: 32rpx;
				text-align: center;

				.back {
					position: absolute;
					left: 20rpx;

				}
			}
		}

		::v-deep .z-tabs-list-container {
			.z-tabs-list{
				padding-left:20rpx;
			}
			.z-tabs-item {
				padding: 0 10rpx;

				.z-tabs-item-title {
					padding: 10rpx 30rpx;
					font-size: 26rpx;
					border-radius: 10rpx;
					background-color: #f5f6f8;
					color: #333;
					position: relative;
				}
				
				.z-tabs-item-title-active::after {
					content: "";
					position: absolute;
					bottom: -15rpx;
					left: 50%;
					transform: translate(-50%,0);
					border-left: 15rpx solid transparent;
					border-right: 15rpx solid transparent;
					border-top: 15rpx solid #de242f;
				}
			}

			.z-tabs-bottom {
				display: none;
			}
		}

		.swiper {
			height: 100%;

		}
		::v-deep .zp-paging-container-content{
			padding-bottom:200rpx;
		}


	}
</style>