MiniPrograms/subpkg/exam/examPractice.vue

<template>
	<view>
		<top-return text="评测练习"></top-return>
		<view class="view-box">
			<view class="trade">
				<view class="texts" :class="curr==0?'active':''" data-index="0" @tap="setCurr">
					第一个页面
				</view>
				<view class="texts" :class="curr==1?'active':''" data-index="1" @tap="setCurr">
					第二个页面
				</view>
				<view class="texts" :class="curr==2?'active':''" data-index="2" @tap="setCurr">
					第三个页面
				</view>
			</view>
			<swiper style="height: 80vh;" :current="curr" @change="setCurr">
				<swiper-item>
					<scroll-view>
						aaa
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view>
						bbb
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view>
						ccc
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_children', ['examPractice'])
		},
		data() {
			return {
				index: '',
				curr: 0
			}
		},
		onLoad(param) {
			this.index = param.index
		},
		methods: {
			setCurr(e) {
				let thisCurr = e.detail.current || e.currentTarget.dataset.index || 0;
				this.curr = thisCurr;
			}
		}
	}
</script>

<style lang="scss">
	.view-box{
		margin-top: 10vh;
		.trade{
			width: 100%;
			color: $title;
			overflow: auto;
			height: 5vh;
		}
		.trade view{
			text-align: center;
			padding-left: 25upx;
			width: 30%;
			float: left;
		}
		.trade .texts.active{
			border-bottom: 8upx solid $color-blue;
		}
	}
</style>