今天开始，就把uni-app前期使用的全部学完了，现在就把以前学习的，做成一案例，中间有未讲的，在进行补充，这里是根据老师视频进行项目案例编写的。
先弄出效果图，然后在根据效果图进行代码的编辑
这是今天需要弄出来的效果图，
添加轮播图
在前面学习了轮播图片的功能，这里就使用起来，使用的是swiper，显示图片的是swiper-items，这里记录下
<swiper indicator-dots autoplay circular
:interval="3000" :duration="1000"
indicator-color="rgba(255,255,255,0.5)"
indicator-active-color="#ffffff">
<swiper-item v-for="(item,index) in picArr" :key="item.id">
<image :src="item.src" mode="aspectFill" ></image>
</swiper-item>
</swiper>
indicator-dots:是否显示面板指示点
autoplay:是否自动切换
circular：是否采用衔接滑动，即播放到末尾后重新回到开头
interval:自动切换时间间隔
duration:滑动动画时长
indicator-color:指示按钮的颜色
indicator-active-color:选中的颜色
这就是轮播图了，但是在运行后，发现样式是不对的，这里得添加下样式
.banner{
width: 750rpx;
padding: 30rpx 0; //padding：当是一个值的时候：是周围四边，两个值：第一个是：上下；第二个是左右；当三个值：第一是上。第二个是左右，第三个是下；当是四个值：第一个是上，第二个右，第三个下，第四个左
swiper{
width: 750rpx;
height: 340rpx;
&-item{
width: 100%;
height: 100%;
padding:0 30rpx;
image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
}
}
这就是整个轮播图的样式，这里说明习下，当如果直接使用这个样式，出来的是不正确的，原因是，是用padding是添加了距离边框，但是添加的这个距离边框会把原始布局往外延伸，这里需要设置成内边框，如何设置：这就是css样式的引入了
在根据下添加一个目录，common，创建一个scss的样式，这个样式设置成全局的样式，
view,swiper,swiper-item{
box-sizing: border-box;
//定义了 user agent 应该如何计算一个元素的总宽度和总高度
// content-box
// 默认值，标准盒子模型。width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。注意：内边距、边框和外边距都在这个盒子的外部。比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。
// 尺寸计算公式：
// width = 内容的宽度
// height = 内容的高度
// 宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。
// border-box
// width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks 模式 时 Internet Explorer 使用的盒模型。注意，填充和边框将在盒子内 , 例如， .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为 350px 的盒子。内容框不能为负，并且被分配到 0，使得不可能使用 border-box 使元素消失。
// 尺寸计算公式：
// width = border + padding + 内容的宽度
// height = border + padding + 内容的高度
}
然后在app下面引用就可以了。
纵向使用轮播文字
看效果图，有个轮播的公告，这也是使用swiper进行设计的，
<view class="notice">
<view class="letf">
<uni-icons type="sound-filled" size="20" color="#309877"></uni-icons>
<text class="text">公告</text>
</view>
<view class="center">
<swiper vertical circular autoplay interval="1500" duration="300">
<swiper-item v-for="item in 4">
内容文字内容文字内容文字内容文字内容文字
</swiper-item>
</swiper>
</view>
<view class="rigth">
<uni-icons type="right" size="16" color="#333"></uni-icons>
</view>
</view>
这就是公告的布局，但是使用这个后，发现所有的组件是纵向显示的，和模版是不相同的，修改下样式：
.notice{
width: 690rpx;
height: 80rpx;
line-height: 80rpx;
background: #f9f9f9;
margin: 0 auto;
border-radius: 80rpx;
display: flex;
.letf{
width: 140rpx;
display: flex;
justify-content: center;
align-items: center;
.text{
font-weight: 600; //指定了字体的粗细程度, 详细查看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight
font-size: 28rpx;
color:#309877 ;
}
}
.center{
flex: 1;
swiper{
height: 100%;
&-item{
height: 100%;
font-size: 30rpx;
color: #666;
overflow: hidden; //设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化上下文时。
white-space: nowrap; //用于设置如何处理元素内的空白字符，nowrap是不让换行显示
text-overflow: ellipsis;// 用于确定如何提示用户存在隐藏的溢出内容 ellipsis：超出文本部分使用省略号
}
}
}
.rigth{
width: 70rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
如果要修改view显示的方式，只要设置了display: flex;，就可以了，
&-item：这是父组件是swiper，子组件是swiper-item，这里的简化方式就可以使用这种写法
这样就是各个布局的代码和样式，下面是全部代码
<template>
<view class="homeLayout">
<view class="banner">
<swiper indicator-dots autoplay circular :interval="3000" :duration="1000"
indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#ffffff">
<swiper-item v-for="(item,index) in picArr" :key="item.id">
<image :src="item.src" mode="aspectFill" ></image>
</swiper-item>
</swiper>
</view>
<view class="notice">
<view class="letf">
<uni-icons type="sound-filled" size="20" color="#309877"></uni-icons>
<text class="text">公告</text>
</view>
<view class="center">
<swiper vertical circular autoplay interval="1500" duration="300">
<swiper-item v-for="item in 4">
内容文字内容文字内容文字内容文字内容文字
</swiper-item>
</swiper>
</view>
<view class="rigth">
<uni-icons type="right" size="16" color="#333"></uni-icons>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
const picArr=ref([{id:1,src:"../../common/images/banner1.jpg"},
{id:2,src:"../../common/images/banner2.jpg"},
{id:3,src:"../../common/images/banner3.jpg"}])
</script>
<style lang="scss" scoped>
.homeLayout{
.banner{
width: 750rpx;
padding: 30rpx 0; //padding：当是一个值的时候：是周围四边，两个值：第一个是：上下；第二个是左右；当三个值：第一是上。第二个是左右，第三个是下；当是四个值：第一个是上，第二个右，第三个下，第四个左
swiper{
width: 750rpx;
height: 340rpx;
&-item{
width: 100%;
height: 100%;
padding:0 30rpx;
image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
}
}
.notice{
width: 690rpx;
height: 80rpx;
line-height: 80rpx;
background: #f9f9f9;
margin: 0 auto;
border-radius: 80rpx;
display: flex;
.letf{
width: 140rpx;
display: flex;
justify-content: center;
align-items: center;
.text{
font-weight: 600; //指定了字体的粗细程度, 详细查看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight
font-size: 28rpx;
color:#309877 ;
}
}
.center{
flex: 1;
swiper{
height: 100%;
&-item{
height: 100%;
font-size: 30rpx;
color: #666;
overflow: hidden; //设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化上下文时。
white-space: nowrap; //用于设置如何处理元素内的空白字符，nowrap是不让换行显示
text-overflow: ellipsis;// 用于确定如何提示用户存在隐藏的溢出内容 ellipsis：超出文本部分使用省略号
}
}
}
.rigth{
width: 70rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>
这就是全部的轮播图和轮播文字！
有不对的地方欢迎大家提问，我是小白，大家共同学习！
![[NISACTF 2022]easyssrf、[NISACTF 2022]level-up](https://img-blog.csdnimg.cn/direct/9d4523a5130b4a038bd5b33913c7a0b7.png)
