今天也要努力写项目之导航栏和滑动选择器及优化

这篇博客介绍了如何使用uni-app进行子页面的搭建，包括创建自定义组件如home-recommend、home-category等，并在index.vue中引入。同时，详细讲解了分段器（u-subsection）的使用，包括配置、引用组件以及实现页面内容随分段器切换动态显示的功能。通过实例展示了前端开发中组件化和动态加载的重要实践。

1.功能分析
修改导航栏外观

"globalStyle": {
		//全局设置文件
		"navigationBarTextStyle": "black",
		//导航栏标题颜色，仅支持黑白色
		"navigationBarTitleText": "uni-app",
		//标签名字
		"navigationBarBackgroundColor": "#aaaaff",
		//导航栏背景颜色
		
	}

使用  分段器组件搭建子页面
封装自己异步请求

2.搭建子页面
首页面分为四个部分，分别是推荐，分类，最新，专辑
新建自定义组件来代替上述的四个页面
home-recommend
home-category
home-new
home-album

//因为首页分为四个部分，所以用组件来说更丝滑一点，所以此处创建四个新的组件

在index.vue文件中填写
做四个文件
在这里插入图片描述

<template>
	<view>专辑</view>
</template>

<script>
	export default {
		name:"home-album",
		data() {
			return {
				
			};
		}
	}
</script>

<style>

</style>

在/index/index.vue文件中

<view>
		<homeAlbum></homeAlbum>
		<homeCategory></homeCategory>
		<homeNew></homeNew>
		<homereCommend></homereCommend>
		</view>


//引入四个组件页面
	import homeAlbum from "../../components/home-album";
	import homeCategory from "../../components/home-category";
	import homeNew from "../../components/home-new";
	import homereCommend from "../../components/home-recommend";
	
	
	
	export default {
		components:{
			homeAlbum,
			homeCategory,
			homeNew,
			homereCommend,
			
		},

2.分段器
分段器指的是uni-ui的一个组件，其实就是我们俗称的标签页，tab栏
简而言之，需要先下载组件，然后在几个文件里键入命令引用组件，最后写入代码即可
此处我把前两部所需要的网址发过来

键入命令配置引用组件： https://www.uviewui.com/components/downloadSetting.html
组件下载地址：https://ext.dcloud.net.cn/plugin?id=1593


<template>
	<view class="bgcolor">
		<view>
			<view class="subsection"></view>	<!-- 模块作用是将下面的四个滑动选择器往下挪挪，防止置顶，影响美观 -->
			<!-- 此处表示出现分段选择器，
			:animation="true"     是否开启动画效果
			value="list.map(v=>v.title)"   直接返回list函数内的字符串
			style-type="text"标题外观改成普通文本
			active-color="#ff0000"		改变标题文本颜色
			list表示数据来源是后面的list对象内，
			current=”curNow表示此处数据等于下方声明的数值，表示选择的唯一性，然后用后面
			的@change事件引用声明了sectionchange，然后下方声明函数sectionChange中不获取
			值，而是通过页面手指选择来确定current的值来确定滑动选择器应处的位置 -->
		<u-subsection :mode="subsection" :font-size="10" :animation="true"   :list="list" :value="list.map(v=>v.name)" style-type="text" active-color="#ff0000" :current="curNow" @change="sectionChange"></u-subsection>
			
<!-- 			组建新的view模块，用来规划展示上面四个组件的内部内容-->	
			<view class="content">
			<view v-if="curNow ===0 ">
			1<homeAlbum></homeAlbum>
				
			</view>
			
			<view v-if="curNow ===1 ">
				2<homeCategory></homeCategory>
			</view>
			
			<view v-if="curNow ===2 ">
				3<homeAlbum></homeAlbum>
			</view>
			
			<view v-if="curNow ===3 ">
			4<homereCommend></homereCommend>
			</view>
			
		</view>
	
		</view>
		
		
	</view>
</template>

<script>
	//引入四个组件页面
	import homeAlbum from "../../components/home-album";
	import homeCategory from "../../components/home-category";
	import homeNew from "../../components/home-new";
	import homereCommend from "../../components/home-recommend";
	// import {unisegmentedcontrol} from "../../components/home-recommend";
	
	
	
	export default {
		//注册组件
		components:{
			homeAlbum,
			homeCategory,
			homeNew,
			homereCommend,
			// unisegmentedcontrol,
			
		},
		
		data() {
			return {
						//此处较为重视，因为list函数是目前极少私用【】中括号的函数
				   list: [{name:'推荐'},{name:'最新'},{name:'分类'},{name:'专辑'}],
				curNow:0
			};
		},
		onLoad() {
		uni.request({url:"https://www.dcloud.io/"})
		.then(res=>{console.log(res);})
		},
		
		methods: {
			//此处注册的是上方滑动选择器的随机获取数值
			sectionChange(e){
				this.curNow=e;
			}
			
			//应用，注册，申明e

		}
	}
</script>

<style scoped lang="scss">
	.bgcolor{
		background-color: #ffeeef;
		width: 750rpx;
		height: 1290rpx;
	}
	.wrap{
		padding: 30rpx;
	}
	.subsection{
		height: 10px;
	}
	
	
	

	
</style>