EP19 各个页面之间的跳转

文件路径： E:/homework/uniappv3tswallpaper/pages/index/index.vue

添加了几个 navigator 。

<template><view class="homeLayout pageBg"><custom-nav-bar title="推荐"></custom-nav-bar><view class="banner"><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true"indicator-color="rgba(255,255,255,0.5)" indicator-active-color="rgba(255,255,255,1)"><swiper-item v-for="item in 3"><image src="../../common/images/banner1.jpg" mode="scaleToFill"></image></swiper-item></swiper></view><view class="notice"><view class="left"><uni-icons type="sound-filled" size="20"></uni-icons><text class="text">公告</text></view><view class="center"><swiper :autoplay="true" :interval="3000" :duration="1000" circular vertical><swiper-item v-for="item in 4"><navigator url="/pages/notice/detail">文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</navigator></swiper-item></swiper></view><view class="right"><uni-icons type="forward" 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"></uni-icons><view class="text"><uni-dateformat :date="Date.now()" format="dd号" /></view></view></template></common-title><view class="content"><scroll-view scroll-x="true"><view class="box" v-for="item in 8" @click="goPreview"><image src="../../common/images/classify1.jpg" mode="aspectFill"></image></view></scroll-view></view></view><view class="theme"><common-title><template #name>专题精选</template><template #custom><navigator url="">More+</navigator></template></common-title><view class="content"><theme-item v-for="item in 8"></theme-item><theme-item :isMore="true"></theme-item></view></view></view>
</template><script setup>const goPreview = () => {uni.navigateTo({url: '/pages/preview/preview'});}
</script><style lang="scss">.homeLayout {.banner {width: 750rpx;padding: 30rpx 0;swiper {width: 100%;height: 340rpx;&-item {width: 100%;height: 100%;padding: 0 30rpx;image {width: 100%;height: 100%;border-radius: 10rpx;}}}}.notice {margin: 0 30rpx;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;background: gray;border-radius: 80rpx;height: 80rpx;line-height: 80rpx;.left {width: 140rpx;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;:deep() {.uni-icons {color: $brand-theme-color !important;}}.text {color: $brand-theme-color;font-weight: 600;font-size: 28rpx;}}.center {flex: 1;height: 100%;swiper {height: 100%;&-item {// 以下三条是实现 文字长度超过显示宽度时展示省略号 的关键操作overflow: hidden;white-space: nowrap;text-overflow: ellipsis;// 以上三条height: 100%;color: $text-font-color-3;font-size: 30rpx;// flex布局与 text-overflow: ellipsis;属性 冲突// display: flex;// flex-direction: row;// flex-wrap: nowrap;// align-content: center;// align-items: center;// justify-content: flex-start;align-content: end;align-items: end;}}}.right {width: 70rpx;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;align-items: center;justify-content: center;}}.select {padding: 50rpx 30rpx 0 30rpx;scroll-view {white-space: nowrap;.box {display: inline-block;width: 200rpx;height: 430rpx;margin-right: 15rpx;image {height: 100%;width: 100%;}}:last-child {margin-right: 0;border-radius: 10rpx;}}.date {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;color: $brand-theme-color;:deep() {.uni-icons {color: $brand-theme-color !important;}}}}.theme {padding: 50rpx 30rpx;.content {display: grid;gap: 15rpx;grid-template-columns: repeat(3, 1fr);}}}
</style>

文件路径： E:/homework/uniappv3tswallpaper/pages/classlist/classlist.vue

添加了 navigator 。

<template><view class="classlist"><custom-nav-bar></custom-nav-bar><view class="content"><navigator url="/pages/preview/preview" class="item" v-for="item in 10"><image src="../../common/images/preview2.jpg" mode="aspectFill"></image></navigator></view></view>
</template><script setup></script><style lang="scss">.classlist {.content {display: grid;grid-template-columns: repeat(3, 1fr);gap: 5px;padding: 5rpx;.item {height: 440rpx;width: 100%;image {height: 100%;width: 100%;display: block;}}}}
</style>

文件路径： E:/homework/uniappv3tswallpaper/pages/classify/classify.vue

添加了 titlebar 。

<template><view class="classLayout pageBg"><custom-nav-bar title="分类"></custom-nav-bar><view class="classify"><theme-item v-for="item in 15"></theme-item></view></view>
</template><script setup></script><style lang="scss" scoped>.classify {padding: 30rpx;display: grid;grid-template-columns: repeat(3, 1fr);gap: 15rpx;}
</style>

文件路径： E:/homework/uniappv3tswallpaper/pages/notice/detail.vue

新增的 公告详情 页面。

<template><view class="noticeLayout"><view class="title"><view class="tag"><uni-tag inverted text="置顶" type="error"></uni-tag></view><view class="font"></view></view><view class="info"><view class="item"></view><view class="item"><uni-dateformat :date="Date.now()" format="yyyy-MM-dd hh:mm:ss" /></view></view><view class="content"></view></view>
</template><script setup></script><style lang="scss" scoped></style>

文件路径： E:/homework/uniappv3tswallpaper/pages/preview/preview.vue

新增了返回功能和 titlebar 。

<template><view class="preview" @click="changeMask"><swiper circular="true"><swiper-item v-for="item in 5"><view class="swiper-item"><image src="../../common/images/preview1.jpg" mode="aspectFill"></image></view></swiper-item></swiper></view><view class="mask" v-show="maskState"><view class="goback" :style="{top:getStatusBarHeight() + 'px', height: getTitleBarHeight() + 'px'}"@click="goBack"><uni-icons type="back" size="20" color="#fff"></uni-icons></view><view class="num">3 / 5</view><view class="time"><uni-dateformat :date="new Date()" format="hh:mm" /></view><view class="date"><uni-dateformat :date="new Date()" format="MM月dd日" /></view><view class="footer"><view class="box" @click="open"><uni-icons type="info" size="28"></uni-icons><view class="text">信息</view></view><view class="box" @click="clickScore"><uni-icons type="star" size="28"></uni-icons><view class="text">评分</view></view><view class="box"><uni-icons type="download" size="28"></uni-icons><view class="text">下载</view></view></view><uni-popup ref="infoPopup" type="bottom"><view class="infoPopup"><view class="popHead"><view class="twoSide"> </view><view class="title">壁纸信息</view><view class="close twoSide" @click="clickInfoClose"><uni-icons type="closeempty" size="18" color="#999"></uni-icons></view></view><view class="popContent"><scroll-view scroll-y show-scrollbar="false"><view class="content"><view class="row"><view class="label">壁纸ID：</view><view class="labelContent"><text selectable="" class="value">165498642</text></view></view><view class="row"><view class="label">分类：</view><view class="labelContent"><text class="value">明星美女</text></view></view><view class="row"><view class="label">发布者：</view><view class="labelContent"><text class="value">呱呱呱</text></view></view><view class="row"><view class="label">评分：</view><view class="labelContent rateBox"><uni-rate readonly="true" touchable="true" value="3.6" size="16" /><text class="value">5分</text></view></view><view class="row"><view class="label">摘要：</view><view class="labelContent"><textclass="value">摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</text></view></view><view class="row"><view class="label">标签：</view><view class="labelContent tabs" v-for="item in 3"><text class="value tab">标签名</text></view></view><view class="copyright">建军事基地附件四哦那个佛哦放假哦计算机的佛i就哦i放到i杰佛i明尼苏达解耦i九年级哦i就欧锦好的话念佛哦你发的时间了哦ijoin的方式哦i</view></view></scroll-view></view></view></uni-popup><uni-popup ref="scorePopup" type="center" :is-mask-click="ture"><view class="scorePopup"><view class="popHead"><view class="title_out"><view class="title">壁纸信息</view></view><view class="close" @click="clickScoreClose"><uni-icons type="closeempty" size="18" color="#999"></uni-icons></view></view><view class="popContent"><view class="scoreStars"><uni-rate v-model="value" @change="scoreStarsChange" :value="scoreNumVal" allow-half="true" /></view><view class="scoreNum">{{scoreNumVal}} 分</view></view><view class="scoreButton"><button class="subScore" @click="subScore" :disabled="!scoreNumVal">确认评分</button></view></view></uni-popup></view>
</template><script setup>import {ref} from 'vue';import {getStatusBarHeight,getTitleBarHeight} from '@/utils/system.js'const maskState = ref(true);const infoPopup = ref(null);const scorePopup = ref(null);const scoreNumVal = ref(0);// 打开遮罩层const changeMask = () => {maskState.value = !maskState.value};// 打开信息层const open = () => {infoPopup.value.open()}// 关闭信息层const clickInfoClose = () => {infoPopup.value.close()}// 打开评分const clickScore = () => {scorePopup.value.open()}// 关闭评分const clickScoreClose = () => {scorePopup.value.close()}// score评分const scoreStarsChange = (e) => {scoreNumVal.value = e.value}// 点击确认提交const subScore = () => {console.log(scoreNumVal.value)}// 返回上一层const goBack = () => {uni.navigateBack();}
</script><style lang="scss" scoped>.preview {width: 100%;height: 100vh;swiper {width: 100%;height: 100%;.swiper-item {height: 100%;width: 100%;image {height: 100%;width: 100%;}}}}.mask {&>view {position: absolute;left: 0%;right: 0%;margin: auto;width: fit-content;color: #fff;}.goback {width: 79rpx;height: 79rpx;background: rgba(0, 0, 0, 0.5);left: 30rpx;margin-left: 0;border-radius: 100px;top: 0;backdrop-filter: blur(10rpx);border: 1rpx solid rbga(255, 255, 255, 0.3);display: flex;align-items: center;justify-content: center;}// position: relative; // 需要的是相对于整个屏幕的绝对位置，所以在这里不设置这个属性.num {top: 10vh;background: rgba(0, 0, 0, 0.3);backdrop-filter: blur(10rpx);padding: 8rpx 18rpx;border-radius: 40rpx;font-size: 28rpx;}.time {top: calc(10vh + 160rpx);font-size: 140rpx;font-weight: 100;line-height: 1rem;text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);}.date {top: calc(10vh + 280rpx);font-size: 34rpx;text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);}.footer {bottom: 10vh;background: rgba(255, 255, 255, 0.8);width: 65vw;height: 120rpx;border-radius: 120rpx;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: space-evenly;align-items: center;.box {display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;padding: 2rpx 12rpx;.text {color: $text-font-color-2;font-size: 26rpx;}}}.infoPopup {background: #fff;padding: 30rpx;border-radius: 30rpx 30rpx 0 0;overflow: hidden;color: black;.popHead {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: space-between;align-items: center;.title {color: $text-font-color-2;font-size: 26rpx;}.close {// padding: 6rpx;}}.popContent {height: 60vh;scroll-view {height: 100%;.content {.row {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;align-items: center;justify-content: center;padding: 16rpx 0;font-size: 32rpx;line-height: 1.7rem;.label {width: 25%;text-align: right;color: $text-font-color-3;font-size: 30rpx;}.labelContent {flex: 1;width: 0;}.rateBox {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: center;.value {font-size: 26rpx;color: $text-font-color-3 ;padding-left: 25rpx;}}.tabs {display: flex;flex-wrap: wrap;.tab {border: 1px solid $brand-theme-color;color: $brand-theme-color;font-size: 22rpx;padding: 10rpx 30rpx;border-radius: 40rpx;line-height: 1rem;margin: 0 10rpx 10rpx 0;width: fit-content;}}}.copyright {font-size: 22rpx;padding: 20rpx;background: #f6f6f6;color: #666;border-radius: 10rpx;margin: 20rpx 0;line-height: 1.6rem;width: 100%;}}}}}.scorePopup {width: 70vw;height: 25vh;background-color: #fff;padding: 30rpx;border-radius: 30rpx;.popHead {display: flex;flex-wrap: wrap;flex-direction: row-reverse;.title_out {width: 100%;height: 0;.title {color: $text-font-color-2;font-size: 26rpx;text-align: center;}}.close {padding: 0 6rpx;}}.popContent {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: space-evenly;align-items: center;padding-top: 70rpx;.scoreNum {text-align: right;width: 100rpx;color: #feca43;}}.scoreButton {padding: 80rpx 70rpx 0 70rpx;}}}
</style>