文件路径: 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 bannerList" :key="item._id">
<navigator :url="item.url" :app-id="item.appid" target="miniProgram" class="bannerNav"
v-if="item.target=='miniProgram'">
<image :src="item.picurl" mode="scaleToFill"></image>
</navigator>
<navigator :url="`/pages/classlist/classlist?${item.url}`" class="bannerNav" v-else>
<image :src="item.picurl" mode="scaleToFill"></image>
</navigator>
</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 noticeList" :key="item._id">
<navigator :url="'/pages/notice/detail?id=' + item._id">
{{item.title}}
</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 randomList" :key="item._id" @click="goPreview(item._id)">
<image :src="item.smallPicurl" mode="aspectFill"></image>
</view>
</scroll-view>
</view>
</view>
<view class="theme">
<common-title>
<template #name>
专题精选
</template>
<template #custom>
<navigator url="/pages/classify/classify" open-type="reLaunch">More+</navigator>
</template>
</common-title>
<view class="content">
<theme-item v-for="item in classifyList" :key="item._id" :items="item"></theme-item>
<theme-item :isMore="true"></theme-item>
</view>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
import {
apiGetBanner,
apiGetDayRandom,
apiGetRequest,
apiGetClassify
} from "@/api/apis.js"
import {
onShareAppMessage,
onShareTimeline
} from "@dcloudio/uni-app"
const bannerList = ref([]);
const randomList = ref([])
const noticeList = ref([])
const classifyList = ref([])
const getBanner = async () => {
let res = await apiGetBanner()
console.log(res)
bannerList.value = res.data
};
const getDayRandom = async () => {
let res = await apiGetDayRandom()
randomList.value = res.data
};
const getNotice = async () => {
let res = await apiGetRequest({
select: true
})
noticeList.value = res.data
}
const getClassify = async () => {
let res = await apiGetClassify({
select: true
})
classifyList.value = res.data
}
// 点击跳转到壁纸预览页面
const goPreview = (id) => {
uni.setStorageSync("storageClassList", randomList.value);
uni.navigateTo({
url: '/pages/preview/preview?id=' + id
})
};
// 分享给好友
onShareAppMessage((e) => {
return {
title: "壁纸小程序好友",
path: "/pages/classify/classify"
}
})
// 分享到朋友圈
onShareTimeline(() => {
return {
title: "壁纸小程序朋友圈"
}
})
getBanner()
getDayRandom()
getNotice()
getClassify()
</script>
<style lang="scss">
.homeLayout {
.banner {
width: 750rpx;
padding: 30rpx 0;
swiper {
width: 100%;
height: 340rpx;
&-item {
width: 100%;
height: 100%;
padding: 0 30rpx;
.bannerNav {
width: 100%;
height: 100%;
}
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>