今天小组视频会议协商了作品的最终版本之后,开始各自分工制作功能,因为第一阶段的课程表功能已经很完善了,所以就先把大致框架设计了一下,最终我们决定采用滑动切换屏幕,代码就是下面的:
<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>
除此之外,在上一阶段的制作之后,我们总结了一些bug就是第一个界面添加了课程之后会显示添加成功的课程信息,但是一切换到别的界面课程信息就不见了,这些是需要在第二阶段解决的