一、通屏效果的實現(xiàn)

可以看到頁面主體部分到頂部有一塊空白區(qū)域，影響觀感，下面實現(xiàn)通屏效果：

在pages.json的pages各菜單中添加"navigationStyle": "custom"

示例代碼：

{"path": "pages/index/index","style": {"navigationBarTitleText": "手機壁紙","navigationStyle": "custom"}
}

重新運行效果：

二、分類列表頁面和頁面跳轉

1、在pages目錄下創(chuàng)建classlist.vue頁面，寫入下面的代碼：

<template><view class="classlist"><view class="content"><navigator url="" 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" scoped>.classlist{.content{display: grid;grid-template-columns: repeat(3,1fr);gap: 5rpx;padding: 5rpx;.item{height: 440rpx;image{width: 100%;height: 100%;display: block;}}}}     
</style>

2、在theme-item.vue公共組件navigator中指定要跳轉到的詳情頁面：

<navigator url="/pages/classlist/classlist" class="box" v-if="!isMore">

“更多”頁面的跳轉：

<navigator url="/pages/classify/classify" open-type="reLaunch" class="box more" v-if="isMore">

注意：跳轉到底部導航菜單時，需指定open-type="reLaunch"，否則無法跳轉。

“我的”里邊“我的下載”的跳轉：

<navigator url="/pages/classlist/classlist"><view class="row" ><view class="left"><uni-icons type="download-filled" size="20" ></uni-icons><view class="text">我的下載</view></view><view class="right"><view class="text">33</view><uni-icons type="right" size="15" ></uni-icons></view></view>
</navigator>