第二阶段冲刺1

今天小组视频会议协商了作品的最终版本之后，开始各自分工制作功能，因为第一阶段的课程表功能已经很完善了，所以就先把大致框架设计了一下，最终我们决定采用滑动切换屏幕，代码就是下面的：

 

<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{

        width: 100%;

        color: #007AFF;

        overflow: auto;

    }

    .trade view{

        text-align: center;

        padding-left: 25upx;

        width: 30%;

        float: left;

    }

    .trade .texts.active{

        border-bottom: 8upx solid #F0AD4E;

    }

</style>

 

除此之外，在上一阶段的制作之后，我们总结了一些bug就是第一个界面添加了课程之后会显示添加成功的课程信息，但是一切换到别的界面课程信息就不见了，这些是需要在第二阶段解决的