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

  • 相关阅读:
    Solidity notes
    Solidity by Example详解
    基本命令中部
    基本命令上部
    服务器介绍
    Linux发展史及安装
    ERROR: Unrecognized command line argument: 'use'
    RequireJs 深入理解
    Redis 安装教程 (Windows 2.6.13 稳定版)
    System.AccessViolationException: 尝试读取或写入受保护的内存 解决办法
  • 原文地址:https://www.cnblogs.com/shumouren/p/13090518.html
Copyright © 2011-2022 走看看