uni-app分段器

<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<!-- 
					分段器 
					导航跳转不同组件
			 -->
			<uni-segmented-control 
			:current="current" 
			<!-- 操作数组 -->
			:values="items.map(v => v.title)" 
			style-type="text" 
			:active-color="activeColor"
			@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<!-- 导航组件页面 -->
				<home-recommend></home-recommend>
			</view>
			<view v-if="current === 1">
			<!-- 导航组件页面 -->
				<home-category></home-category>
			</view>
			<view v-if="current === 2">
			<!-- 导航组件页面 -->
				<home-new></home-new>
			</view>
			<view v-if="current === 3">
			<!-- 导航组件页面 -->
				<home-album></home-album>
			</view>
		</view>
	</view>
</template>

<script>
	import homeAlbum from "./home-album/home-album.vue";
	import homeRecommend from "./home-recommend/home-recommend.vue";
	import homeNew from "./home-new/home-new.vue";
	import homeCategory from "./home-category/home-category.vue";
	export default {
		components: {},
		data() {
			return {
				items: [
					{title : "推荐"},
					{title : "分类"},
					{title : "最新"},
					{title : "专辑"},
				],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				current: 0,
				colorIndex: 0,
				activeColor: '#d4237a',
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		},
		components: {
			homeAlbum,
			homeRecommend,
			homeNew,
			homeCategory
		}
	}
</script>

<style lang="scss">

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		// padding: 0px 30px;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		height: 150px;
		text-align: center;
	}

	.content-text {
		font-size: 18px;
		color: $uni-text-color;
	}

	.color-tag {
		width: 25px;
		height: 25px;
	}

	.uni-list {
		flex: 1;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #FFFFFF;
	}


	.uni-list-item__container {
		padding: 12px 15px;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: $uni-border-color;
	}

	.uni-list-item__content-title {
		font-size: 16px;
	}
</style>