EP26 在onLoad周期获取参数获取对应的数据

文件路径： E:/homework/uniappv3tswallpaper/components/theme-item/theme-item.vue

该文件在 navigatior 中的跳转地址里传递 id 和 name 两个参数。

<template><view class="themeItem"><navigator :url="'/pages/classlist/classlist?id=' + items._id + '&name=' + items.name" class="box"v-if="!isMore"><image class="pic" :src="items.picurl" mode="aspectFill"></image><view class="mask">{{items.name}}</view><view class="tab">{{formatTimeDifference(items.updateTime)}}</view></navigator><navigator url="/pages/classify/classify" 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><script setup>import {formatTimeDifference} from "@/utils/common.js"defineProps({isMore: {type: Boolean,default: false},items: {type: Object,default () {return {name: "默认名称",picurl: "../../common/images/classify1.jpg",select: true,updateTime: Date.now() - 1000 * 60 * 60 * 5,}}}})
</script><style lang="scss">.themeItem {.box {height: 340rpx;border-radius: 10rpx;overflow: hidden;position: relative;.pic {width: 100%;height: 100%;}.mask {position: absolute;bottom: 0;left: 0;width: 100%;height: 70rpx;background-color: rgba(0, 0, 0, 0.2);color: #fff;display: flex;align-items: center;justify-content: center;font-weight: 600;backdrop-filter: blur(20rpx);}.tab {position: absolute;left: 0%;top: 0%;background: rgba(250, 190, 90, 0.7);backdrop-filter: blur(20rpx);color: #fff;padding: 6rpx 14rpx;border-radius: 0 0 20rpx 0;transform: scale(0.8);transform-origin: left top;}}.box.more {.mask {height: 100%;width: 100%;flex-direction: column;}.text {font-size: 28rpx;}}}
</style>

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

接收了参数并且获取了相应的数据。
这里在 onLoad 周期中进行获取和调用函数，因为其他部分执行在onload之前，如果在onload之外调用函数，queryParams 还没有获取到id和name。

<template><view class="classlist"><view class="content"><navigator url="/pages/preview/preview" class="item" v-for="item in classList" :key="item._id"><image :src="item.smallPicurl" mode="aspectFill"></image></navigator></view></view>
</template><script setup>import {ref} from 'vue'import {apiGetCLassList} from '@/api/apis.js'import {onLoad} from '@dcloudio/uni-app'const queryParams = {}onLoad(e => {console.log(e)let {id = null,name = null} = euni.setNavigationBarTitle({title: name})queryParams.classid = idgetClassList()})const classList = ref([])const getClassList = async () => {let res = await apiGetCLassList(queryParams)console.log(res)classList.value = res.data}
</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>