Day2:前端项目uniapp壁纸实战

先来做一个轮番图。

效果如下:

common-style.css

复制代码
view,swiper,swiper-item{
	box-sizing: border-box;
}

index.vue

复制代码
<template>
	<view class="homeLayout">
		<view class="banner">
			<swiper circular indicator-dots autoplay>
				<swiper-item>
					<image src="../../common/images/581c367aa65db_1024.jpg" 
					mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../common/images/581c449f64980_1024.jpg"
					mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.homeLayout{
		.banner{
			width: 750rpx;
			padding: 30rpx 0;
			swiper{
				width: 750rpx;
				height: 340rpx;
				swiper-item{
					width: 100%;
					height: 100%;
					padding: 0 30rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>

图片素材如下:

可以自己到网上下载图片素材,放到common下的image下

接下来做公告

该音量图标到uniapp官网下载,

步骤如下:

点击下载&安装

下载并导入

按打开

复制基本用法的代码

下滑找到音量

把基本用法的type="contact"的contact改成sound-filled,可以调整大小和颜色。

如下:

复制代码
<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				
			</view>
			<view class="right">
				
			</view>
		</view>

同理,在right下加个箭头

复制代码
<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>

效果如下:

调整一下:

复制代码
<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay interval="1500"  duration="300" circular>
					<swiper-item v-for="item in 4">文字内容文字内容文字内容文字内容文字内容</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>

<style lang="scss" scoped>
	.homeLayout{
		.banner{
			width: 750rpx;
			padding: 30rpx 0;
			swiper{
				width: 750rpx;
				height: 340rpx;
				swiper-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;
			.left{
				width: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.text{
					color: #28b389;
					font-weight: 600;
					font-size: 28rpx;
				}
			}
			.center{
				flex: 1;
				swiper{
					height: 100%;
					swiper-item{
						height: 100%;
						font-size: 30rpx;
						color: #666;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
			.right{
				width: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>

效果如下:

完整代码如下:

复制代码
<template>
	<view class="homeLayout">
		<view class="banner">
			<swiper circular indicator-dots autoplay>
				<swiper-item>
					<image src="../../common/images/581c367aa65db_1024.jpg" 
					mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../common/images/581c449f64980_1024.jpg"
					mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay interval="1500"  duration="300" circular>
					<swiper-item v-for="item in 4">文字内容文字内容文字内容文字内容文字内容</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.homeLayout{
		.banner{
			width: 750rpx;
			padding: 30rpx 0;
			swiper{
				width: 750rpx;
				height: 340rpx;
				swiper-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;
			.left{
				width: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.text{
					color: #28b389;
					font-weight: 600;
					font-size: 28rpx;
				}
			}
			.center{
				flex: 1;
				swiper{
					height: 100%;
					swiper-item{
						height: 100%;
						font-size: 30rpx;
						color: #666;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
			.right{
				width: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
相关推荐
PanZonghui3 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴6 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte9 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常11 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常12 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101816 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28123 分钟前
Chrome插件开发
前端
许白掰25 分钟前
Linux入门篇学习——借助 U 盘或 TF 卡拷贝程序到开发板上
linux·学习·借助 u 盘拷贝程序到开发板上·借助 tf卡拷贝程序到开发板上
前端 贾公子35 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js