鸡汤来咯开发学习笔记-2

1.在page.info中加入"navigationStyle": "custom"，可以使页面变成无头部导航栏的通屏

2.对index.vue进行了修改

<template>
<view class="homeLayout">
    <view class="head">头部</view>
    <view class="body">
    <view class="swiperOut">//滑动组件
        <swiper vertical>//vertical是设置属性为向下滑动
            <swiper-item v-for="(item,index) in 5">   //循环index数组在item的项目中，item是固有属性，每一项对应一个index
                {{index+1}}
            </swiper-item>
            
        </swiper>
    </view>    
     <view class="progress">//加入一个进度条
         <view class="line"></view>//进度的线
     </view>
    </view> 
</view>
 </template>

 <script setup>

 </script>

<style lang="scss">
.homeLayout{
height: 100vh;
background: #BDE1FB;
display: flex;//容器布局
flex-direction: column;// CSS Flexbox（弹性盒子）布局模型的一个属性，它定义了弹性容器中子项（flex items）的主轴方向。当设置为 column 时，子项会按照垂直方向排列，从上到下堆叠。
.head{
    height: 350rpx;
}
.body{
    flex: 1;
    background: #fff;
    border-radius: 50rpx 50rpx 0 0;//设计圆角
    .swiperOut{
        height: calc(100% - 10rpx);
        swiper{
            height: 100%;
            swiper-item:nth-child(2n-1){   //child是子项目，第几项的意思
                background: lightgreen;
            }
        }
    }
    .progress{
        height: 10rpx;
        width: 100%;
        background: #eee;
        .line{
            height: 100%;
            width: 50%;
            background: linear-gradient(to right,#BDE1FB,#74dbef);//渐变色，从一个颜色到另一个颜色
        }
    }
}
}

</style>