uni-app项目实战笔记6--同一组件使用Props传递不同的值

先来看效果：

本篇实现最后一张“更多”图的效果，前8张图点击跳转到查看详情页面，而点击“更多”则跳转到分类页面，因此在跳转处理上需要区别对待。视觉展示上也要营造出不同的效果。在上一篇笔记的基础上，我们增加一个navigator用于实现“更多”：

<template>
	<view class="themeItem">
		<navigator url="" class="box" v-if="!isMore">
			<image class="pic" src="/common/images/classify1.jpg" mode="aspectFill"></image>
			<view class="tab">
				3天前更新
			</view>
			<view class="mask">
				明星美女
			</view>
		</navigator>
		<navigator url="" class="box more" v-if="isMore">
			<image class="pic" src="/common/images/more.jpg" mode="aspectFill"></image>
			<view class="mask">
				<uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
				<text class="text">更多</text>
			</view>
		</navigator>
	</view>
</template>

主要增加这部分代码：

<navigator url="" class="box more" v-if="isMore">
	<image class="pic" src="/common/images/more.jpg" mode="aspectFill"></image>
	<view class="mask">
		<uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
		<text class="text">更多</text>
	</view>
</navigator>

要点：

1.class="box more"：使该部分继承(拥有)前面定义的box样式，同时又拥有自己的特性；

2.type="more-fille"引入uniapp扩展组件--更多的图标。

CSS代码：

.box.more{
   .mask{
	   width: 100%;
	   height: 100%;
	   flex-direction: column;
   }
   .text{
	   font-size: 28rpx;
   }
}

flex-direction: column; 是 CSS Flexbox 布局的一个属性，它决定了 flex 容器（父元素）中子元素的排列方向。

效果说明：
当给一个 display: flex; 的容器设置 flex-direction: column; 时，它的子元素会 垂直排列（从上到下），而不是默认的水平排列（从左到右）。

为了实现正常显示图片和更多的效果，我们可以定义一个isMore的属性：

在theme-item定义isMore属性，默认值为false：

<script setup>
   defineProps({
	   isMore:{
		   type:Boolean,
		   default:false
	   }
   })
</script>

然后在index.vue原先引入theme-item公共组件的地方再引入一个theme-item组件：

<view class="content">
	<theme-item v-for="item in 8"></theme-item>
	<theme-item :isMore="true"></theme-item>
</view>

通过子组件传入true，让组件显示为“更多”：最后一张图显示为更多的效果。前8张图未传isMore则使用默认值false：显示正常的图片效果。