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

一、通屏效果的实现

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

在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>