今天小组视频会议协商了作品的最终版本之后,开始各自分工制作功能,因为第一阶段的课程表功能已经很完善了,所以就先把大致框架设计了一下,最终我们决定采用滑动切换屏幕,代码就是下面的
<template> <view class="big"> <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: 100vh;" :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> </template>
<script> export default { data() { return { curr:0 } }, methods: { setCurr(e) { // console.log(e.detail.current) let thisCurr = e.detail.current || e.currentTarget.dataset.index || 0; // console.log(thisCurr) this.curr = thisCurr; } } } </script>
<style> .trade{ 100%; color: #007AFF; overflow: auto; } .trade view{ text-align: center; padding-left: 25upx; 30%; float: left; } .trade .texts.active{ border-bottom: 8upx solid #F0AD4E; } </style>