再在wallpaper新建一个目录components
在components下新建组件common-title
记得点击创建同名目录
在index加
<view class="select">
<common-title></common-title>
</view>
图片换了下，原来的有点丑，图片可按自己喜欢在网上下载
加一个select
<view class="select">
<common-title></common-title>
<view class="content">
<scroll-view scroll-x>
<view class="box" v-for="item in 8">
<image src="../../common/images/【哲风壁纸】插画艺术-美女.png" mode="aspectFill"></image>
</view>
</scroll-view>
</view>
</view>效果如下：
调整一下：
.select{
padding-top: 50rpx;
.content{
width: 720rpx;
margin-left: 30rpx;
scroll-view{
white-space: nowrap;
.box{
width: 200rpx;
height: 430rpx;
display: inline-block;
margin-right: 15rpx;
image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
.box:last-child{margin-right: 30rpx;}
}
}
}效果如下：
想要好看点就下载多一点图片哈
<view class="select">
<common-title></common-title>
<view class="content">
<scroll-view scroll-x>
<view class="box">
<image src="../../common/images/【哲风壁纸】插画艺术-美女.png"
mode="aspectFill"></image>
</view>
<view class="box">
<image src="../../common/images/【哲风壁纸】原画艺术-插画艺术.png"
mode="aspectFill"></image>
</view>
<view class="box">
<image src="../../common/images/【哲风壁纸】柯南-贝尔摩德.png"
mode="aspectFill"></image>
</view>
<view class="box">
<image src="../../common/images/【哲风壁纸】杀生丸-犬夜叉.png"
mode="aspectFill"></image>
</view>
<view class="box">
<image src="../../common/images/【哲风壁纸】IPhone-iPhone壁纸.png"
mode="aspectFill"></image>
</view>
<view class="box">
<image src="../../common/images/【哲风壁纸】Spider-Man-品红色.png"
mode="aspectFill"></image>
</view>
</scroll-view>
</view>
</view>效果如下：
接下来我们来弄一下公共标题
来到common-title.vue
<template>
<view class="common-title">
<view class="name">
<slot name="name"></slot>
</view>
<view class="custom">
<slot name="custom"></slot>
</view>
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.common-title{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
.name{
font-size: 40rpx;
}
}
</style>再去uniapp官网
下载
按打开
下载好了，最好重启一下哈
拷贝
修改并加上日历图标：
<view class="select">
<common-title>
<template #name>每日推荐</template>
<template #custom>
<view class="date">
<uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
<uni-dateformat :date="Date.now()" format="yyyy年MM"></uni-dateformat>
</view>
</template>
</common-title>
.select{
padding-top: 50rpx;
.date{
color:#28b389;
display: flex;
align-items: center;
.text{
margin-left: 5rpx;
}
}index.vue的完整代码：
<template>
<view class="homeLayout">
<view class="banner">
<swiper circular indicator-dots autoplay>
<swiper-item>
<image src="../../common/images/【哲风壁纸】动漫-少女插画.png"
mode="aspectFill"></image>
</swiper-item>
<swiper-item>
<image src="../../common/images/【哲风壁纸】女孩-黑猫女孩.png"
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">欢迎来到Kx......壁纸</swiper-item>
</swiper>
</view>
<view class="right">
<uni-icons type="right" size="16" color="#333"></uni-icons>
</view>
</view>
<view class="select">
<common-title>
<template #name>每日推荐</template>
<template #custom>
<view class="date">
<uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
<uni-dateformat :date="Date.now()" format="yyyy年MM"></uni-dateformat>
</view>
</template>
</common-title>
<view class="content">
<scroll-view scroll-x>
<view class="box">
<image src="../../common/images/【哲风壁纸】插画艺术-美女.png"
mode="aspectFill"></image>
</view>
<view class="box">
<image src="../../common/images/【哲风壁纸】原画艺术-插画艺术.png"
mode="aspectFill"></image>
</view>
<view class="box">
<image src="../../common/images/【哲风壁纸】柯南-贝尔摩德.png"
mode="aspectFill"></image>
</view>
<view class="box">
<image src="../../common/images/【哲风壁纸】杀生丸-犬夜叉.png"
mode="aspectFill"></image>
</view>
<view class="box">
<image src="../../common/images/【哲风壁纸】IPhone-iPhone壁纸.png"
mode="aspectFill"></image>
</view>
<view class="box">
<image src="../../common/images/【哲风壁纸】Spider-Man-品红色.png"
mode="aspectFill"></image>
</view>
</scroll-view>
</view>
</view>
<view class="theme">
<common-title>
<template #name>专题精选</template>
</common-title>
</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;
}
}
.select{
padding-top: 50rpx;
.date{
color:#28b389;
display: flex;
align-items: center;
.text{
margin-left: 5rpx;
}
}
.content{
width: 720rpx;
margin-left: 30rpx;
scroll-view{
white-space: nowrap;
.box{
width: 200rpx;
height: 430rpx;
display: inline-block;
margin-right: 15rpx;
image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
.box:last-child{margin-right: 30rpx;}
}
}
}
}
</style>