jje_staff/pages/performanceList/performanceList.vue

<template>
	<view class="page">
		<uni-nav-bar  :fixed="true" background-color="#FFE05C" :border="false" :statusBar="true"  left-icon="left" title="我的业绩" @clickLeft="back" />
		<view class=" tabs ">
			<u-tabs :list="tabList" :scrollable="false" lineWidth="30" lineColor="#FFE05C" :activeStyle="{color: '#333333',fontWeight: 'bold',transform: 'scale(1.05)'}" :current="tabIndex" @click="clickTab"></u-tabs>
		</view>


		<!-- 订单列表 -->
		<view :style="{'height':windowHeight}">
			<swiper :style="{'height':windowHeight}" :current="tabIndex" @change="swiperChange">
				<swiper-item class="swiperItem" v-for="(item,index) in tabList" :key="index">
					<view>
						<mescroll-item ref="MescrollItem" :i="index" :index="tabIndex" :tabs="tabList" :height="windowHeight" >
						</mescroll-item>
					</view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	import MescrollItem from "./module/mescrollUni-item.vue";
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				tabIndex: 0,
				tabList: [{
					name: '累计服务'
				}, {
					name: '今日业绩'
				}, {
					name: '本月业绩'
				}],
				windowHeight:'',
			}
		},
		onLoad(e) {
			this.tabIndex = e.index
			let sysInfo = uni.getSystemInfoSync()
			this.windowHeight = sysInfo.windowHeight - 74 - 70 + 'px' //除标题栏栏外的屏幕可用高度
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			clickTab(e) {
				this.tabIndex = e.index
			},
			swiperChange(e) {
				this.tabIndex = e.detail.current

			},
		}
	}
</script>

<style scoped lang="scss">
	@import './index.rpx.css';
</style>