当前位置：首页 > news >正文

学习Uni-app开发小程序Day17

news 来源：原创 2024/7/2 23:07:53

今天开始，就把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-weightfont-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-weightfont-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>