当前位置：首页 > news >正文

uni-app项目实战笔记12--创建分类列表完成页面跳转

news 来源：原创 2025/6/15 8:05:25

一、通屏效果的实现

可以看到页面主体部分到顶部有一块空白区域，影响观感，下面实现通屏效果：

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

示例代码：

{"path": "pages/index/index","style": {"navigationBarTitleText": "手机壁纸","navigationStyle": "custom"}
}

重新运行效果：

二、分类列表页面和页面跳转

1、在pages目录下创建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>