• 第二阶段冲刺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{

            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就是第一个界面添加了课程之后会显示添加成功的课程信息,但是一切换到别的界面课程信息就不见了,这些是需要在第二阶段解决的

  • 相关阅读:
    练习:使用nmcli 配置网络连接
    编辑网络配置文件
    ETCD安装
    LInux部署本地DNSbind9
    Linux 修改tomcat9相关参数优化
    Linux-编写SHELL 加密解密方法
    Jenkins的安装部署
    lepus 配置监控Mysql+Redis+Mongodb服务器
    lepus部署
    prometheus + grafana 安装 监控 redis mysql mongodb Linux服务器
  • 原文地址:https://www.cnblogs.com/shumouren/p/13090518.html
Copyright © 2020-2023  润新知