一、咸虾米壁纸项目实战
1.项目初始化公共目录和设计稿尺寸测量工具
（1）即时设计
拖入图片
锁定
切片
（2) ps
打开，锁定
选框工具
2.创建项目
创建wallpaper\common\images目录,创建wallpaper\static\images目录，并放入图片，创建wallpaper\common\style目录创建common-style.scss
在App.vue中引入
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
@import "common/style/common-style.scss"
</style>
3.banner海报swiper轮播器
<template>
<view class="homeLayout">
<view class="banner">
<swiper indicator-dots indicator-color="#393939" indicator-active-color="#c8c7cc" autoplay circular>
<swiper-item v-for="item in 3">
<image src="/common/images/banner1.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 {
border-radius: 15rpx;
width: 100%;
height: 100%;
}
}
}
}
}
</style>展示：
4.使用swiper的纵向轮播做公告区域
text-overflow - CSS：层叠样式表 | MDN
<template>
<view class="homeLayout">
<view class="banner">
<swiper indicator-dots indicator-color="#393939" indicator-active-color="#c8c7cc" autoplay circular>
<swiper-item v-for="item in 3">
<image src="/common/images/banner1.jpg" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
<view class="notice">
<view class="left">
<uni-icons type="sound" size="20" color="#28b389"></uni-icons>
<text class="text">公告</text>
</view>
<view class="center">
<swiper vertical autoplay circular interval="1500" duration="300">
<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 {
border-radius: 15rpx;
width: 100%;
height: 100%;
}
}
}
}
.notice {
width: 690rpx;
height: 80rpx;
background: #f9f9f9;
margin: 0 auto;
border-radius: 80rpx;
display: flex;
line-height: 80rpx;
.left {
widows: 140rpx;
display: flex;
align-items: center;
justify-content: center;
.text {
font-size: 28rpx;
font-weight: 600;
color: #28b389;
}
}
.content {
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>
5.组件具名插槽定义公共标题模块
新建组件wallpaper\components\common-title
uni-dateformat 日期格式化 - DCloud 插件市场
<template>
<view class="homeLayout">
<view class="banner">
<swiper indicator-dots indicator-color="#393939" indicator-active-color="#c8c7cc" autoplay circular>
<swiper-item v-for="item in 3">
<image src="/common/images/banner1.jpg" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
<view class="notice">
<view class="left">
<uni-icons type="sound" size="20" color="#28b389"></uni-icons>
<text class="text">公告</text>
</view>
<view class="center">
<swiper vertical autoplay circular interval="1500" duration="300">
<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 class="select">
<common-title>
<template #name>每日推荐</template>
<template #custom>
<view class="date">
<uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
<view class="text">
<uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
</view>
</view>
</template>
</common-title>
<view class="content">
<!-- 横向滑动 -->
<scroll-view scroll-x>
<view class="box" v-for="item in 8">
<image src="/common/images/preview_small.webp" mode="aspectFill"></image>
</view>
</scroll-view>
</view>
</view>
<view class="theme">
<common-title>
<template #name>专题精选</template>
<template #custom>
<navigator url="" class="more">More+</navigator>
</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 {
border-radius: 15rpx;
width: 100%;
height: 100%;
}
}
}
}
.notice {
width: 690rpx;
height: 80rpx;
background: #f9f9f9;
margin: 0 auto;
border-radius: 80rpx;
display: flex;
line-height: 80rpx;
.left {
widows: 140rpx;
display: flex;
align-items: center;
justify-content: center;
.text {
font-size: 28rpx;
font-weight: 600;
color: #28b389;
}
}
.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;
.content {
width: 720rpx;
margin-left: 30rpx;
margin-top: 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;
}
}
}
// 日期
.date {
color: #28b389;
display: flex;
align-items: center;
:deep() {
.uni-icons {
color: #28b389 !important;
}
}
.text {
margin-left: 5rpx;
}
}
}
.theme {
padding: 50rpx 0;
.more {
font-size: 32rpx;
color: #888;
}
}
}
</style>展示：
6.磨砂背景定位布局做专题组件
创建 /components/theme-item/theme-item组件
grid-template-columns - CSS：层叠样式表 | MDN
backdrop-filter - CSS：层叠样式表 | MDN
transform-origin - CSS：层叠样式表 | MDN
<template>
<view class="themeItem">
<navigator :url="">
<image class="pic" src="/common/images/classify1.jpg" mode="aspectFill"></image>
<view class="mask">宠物</view>
<view class="tab" >3前更新</view>
</navigator>
<、template>
<style lang="scss" scoped>
.themeItem {
.box {
height: 340rpx;
border-radius: 10rpx;
overflow: hidden;
position: relative;
.pic {
width: 100%;
height: 100%;
}
.mask {
width: 100%;
height: 70rpx;
position: absolute;//绝对定位
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(20rpx);//添加图形效果
font-weight: 600;
font-size: 30rpx;
}
.tab {
position: absolute;
left: 0;
top: 0;
background: rgba(250, 129, 90, 0.7);
backdrop-filter: blur(20rpx);
color: #fff;
font-size: 22rpx;
padding: 6rpx 14rpx;
border-radius: 0 0 20rpx 0;
transform: scale(0.8);
transform-origin: left top;
}
}
}
</style>7.同一组件Props传递不同属性值展示不同效果
flex-direction - CSS：层叠样式表 | MDN
index.vue
<view class="theme">
<common-title>
<template #name>专题精选</template>
<template #custom>
<navigator url="" class="more">More+</navigator>
</template>
</common-title>
<!-- 主体部分 -->
<view class="content">
<theme-item v-for="item in 10" ></theme-item>
<theme-item :isMore="true"></theme-item>
</view>
</view>theme-item.vue
<script setup>
//接收
defineProps({
isMore: {
type: Boolean,
default: false
}
})
</script>
<template>
<view class="themeItem">
<navigator url="" class="box" v-if="!isMore">
<image class="pic" src="/common/images/classify1.jpg" mode="aspectFill"></image>
<view class="mask">{{item.name}}</view>
<view class="tab" >3前更新</view>
</navigator>
<navigator url="" open-type="reLaunch" class="box more" v-if="isMore">
<image class="pic" src="../../common/images/more.jpg" mode="aspectFill"></image>
<view class="mask">
<uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
<view class="text">更多</view>
</view>
</navigator>
</view>
</template>
<style lang="scss" scoped>
.themeItem {
.box {
height: 340rpx;
border-radius: 10rpx;
overflow: hidden;
position: relative;
.pic {
width: 100%;
height: 100%;
}
.mask {
width: 100%;
height: 70rpx;
position: absolute; //绝对定位
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(20rpx); //添加图形效果
font-weight: 600;
font-size: 30rpx;
}
.tab {
position: absolute;
left: 0;
top: 0;
background: rgba(250, 129, 90, 0.7);
backdrop-filter: blur(20rpx);
color: #fff;
font-size: 22rpx;
padding: 6rpx 14rpx;
border-radius: 0 0 20rpx 0;
transform: scale(0.8);
transform-origin: left top;
}
}
.box.more {
.mask {
width: 100%;
height: 100%;
flex-direction: column; //排列顺序
}
.text {
font-size: 28rpx;
}
}
}
</style>
扫一扫
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
