signuptool-ui-xcx/components/TabLayout/TabLayout.vue

<template>
	<view class="container999" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">

		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
		<tabRefresh ref="tabRefresh" @isRefresh='isRefresh'></tabRefresh>

		<view class='nav'>

			<!-- 状态栏 -->
			<view :style="{'height':statusBarHeightPx}"></view>

			<!-- 导航栏 -->
			<view
				:style="{'height':navHeightPx,'width':navWidthPx,'display': 'flex','flex-direction':'row','box-sizing': 'border-box','justify-content': 'space-between'}">
				<view
					:style="{'height':navHeightPx,'display': 'flex','flex-direction':'row','box-sizing': 'border-box'}">
					<image :style="{'height':navHeightPx,'width':iconPx}" mode="aspectFit" :src="backIcon"
						@click="clickBack"></image>
					<text
						:style="{'height':navHeightPx,'line-height':navHeightPx,'font-size':'33rpx','color':'#FFFFFF'}">{{text}}</text>
				</view>

				<view
					:style="{'height':navHeightPx,'display': 'flex','flex-direction':'row','box-sizing': 'border-box'}">
					<view v-if="useTitleLeftBtn!=0"
						:style="{'height':navHeightPx,'display': 'flex','flex-direction':'row','box-sizing': 'border-box'}"
						@click="clickLeftBtn">
						<image v-if="useTitleLeftBtn == 2" :style="{'height':navHeightPx,'width':navHeightPx}"
							mode="aspectFit" :src="titleLeftBtnSource"></image>
						<text v-if="useTitleLeftBtn == 1"
							:style="{'height':navHeightPx,'line-height':navHeightPx,'font-size':'28rpx','color':'#FFFFFF','padding-left':'20rpx','padding-right':'20rpx'}">{{titleLeftBtnSource}}</text>
					</view>
					<view v-if="useTitleRightBtn!=0"
						:style="{'height':navHeightPx,'display': 'flex','flex-direction':'row','box-sizing': 'border-box'}"
						@click="clickRightBtn">
						<image v-if="useTitleRightBtn==2" :style="{'height':navHeightPx,'width':navHeightPx}"
							mode="aspectFit" :src="titleRightBtnSource"></image>
						<text v-if="useTitleRightBtn==1"
							:style="{'height':navHeightPx,'line-height':navHeightPx,'font-size':'28rpx','color':'#FFFFFF','padding-left':'20rpx','padding-right':'20rpx'}">{{titleRightBtnSource}}</text>
					</view>
				</view>
			</view>

			<!-- Tab切换 -->
			<tabTop ref="navTab" :tabTitle="tabTitleData" :tabNum="tabNumData" @onTabClick='clickTab'></tabTop>

		</view>

		<slot></slot>

	</view>
</template>

<script>
	const util = require('@/util/util.js');
	export default {
		props: {
			text: {
				type: String,
				default: ""
			},
			isShareIn: {
				type: Boolean,
				default: false
			},
			hasBack: {
				type: Boolean,
				default: true
			},
			useTitleLeftBtn: {
				type: String,
				// 0不使用 1使用文字 2使用图片
				default: "0"
			},
			useTitleRightBtn: {
				type: String,
				// 0不使用 1使用文字 2使用图片
				default: "0"
			},
			titleLeftBtnSource: {
				type: String,
				default: ""
			},
			titleRightBtnSource: {
				type: String,
				default: ""
			},
			tabTitleData: {
				type: Array,
				default () {
					return []
				}
			},
			tabNumData: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				currentTab: 0, //sweiper所在页
				swiperPaddindTop: 0,
				windowHeight: 0, // 可使用窗口的高度
				statusBarH: 0, // 状态栏高度
				statusBarHeight: "",
				navHeight: "",
				navWidth: "",
				totalHeight: "",
				statusBarHeightPx: "",
				navHeightPx: "",
				navWidthPx: "",
				totalHeightPx: "",
				bg: "#2fa1f0",
				totalHeightUpx: "",
				backIcon: "",
				iconPx: ""
			};
		},
		methods: {
			getViewPagerTop() {
				return this.swiperPaddindTop
			},
			clickLeftBtn() {
				this.$emit("leftBtn", "左侧按钮")
			},
			clickRightBtn() {
				this.$emit("rightBtn", "右侧按钮")
			},
			clickBack() {
				if (this.hasBack) {
					if (this.$props.isShareIn) {
						uni.switchTab({
							url: "../../pages/home/FindFragment"
						})
					} else {
						this.Back()
					}
				}
			},
			// 刷新touch监听
			refreshStart(e) {
				this.$refs.tabRefresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.tabRefresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.tabRefresh.refreshEnd(e);
			},
			isRefresh() {
				this.$emit("downRefresh", this.currentTab)
			},
			// 下拉刷新完成主动调用
			downRefresh() {
				this.$refs.tabRefresh.endAfter()
			},
			// 主动点击tab
			clickTab(index) {
				// 对外提供点击的index(使用控件的页面更改data里currentTab值)
				// 保证能跟着滚动
				this.currentTab = index
				this.$emit("tabClickItem", index)
			}, // swiper 滑动
			changeTab(e) {
				var index = e.detail.current //获取索引
				// 模拟tab点击
				this.$refs.navTab.longClick(index);
			}
		},
		watch: {

			isShareIn(newValue) {

				if (this.$props.hasBack) {
					this.backIcon = '../../static/custom-icon/back.png'
					this.iconPx = this.navHeightPx

					if (this.$props.isShareIn) {
						this.backIcon = '../../static/custom-icon/home.png'
					}

				} else {
					this.backIcon = '../../static/img/public/no-back.png'
					this.iconPx = this.navHeight / 8 * 3 + 'px'
				}

			}

		},
		created() {
			this.navWidth = getApp().globalData.navWidth
			this.navHeight = getApp().globalData.navHeight
			this.totalHeight = getApp().globalData.totalHeight
			this.statusBarHeight = getApp().globalData.statusBarHeight
			this.navWidthPx = getApp().globalData.navWidthPx
			this.navHeightPx = getApp().globalData.navHeightPx
			this.totalHeightPx = getApp().globalData.totalHeightPx
			this.statusBarHeightPx = getApp().globalData.statusBarHeightPx
			this.totalHeightUpx = getApp().globalData.totalHeightUpx

			if (this.$props.hasBack) {
				this.backIcon = '../../static/img/public/back.png'
				this.iconPx = this.navHeightPx

				if (this.$props.isShareIn) {
					this.backIcon = '../../static/img/public/home.png'
				}

			} else {
				this.backIcon = '../../static/custom-icon/no-back.png'
				this.iconPx = this.navHeight / 8 * 3 + 'px'
			}


			this.swiperPaddindTop = this.totalHeight + 45 + 'px'
		}

	}
</script>

<style>
	.container999 {
		width: 100vw;
		font-size: 28upx;
		min-height: 100vh;
		overflow: hidden;
		color: #6B8082;
		position: relative;
	}

	.nav {
		position: fixed;
		left: 0;
		top: 0;
		color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		font-size: 24upx;
		background-color: #2fa1f0;
		z-index: 996;
	}
</style>