学习Uni-app开发小程序Day17

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

这就是全部的轮播图和轮播文字!
有不对的地方欢迎大家提问,我是小白,大家共同学习!

  • 36
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值