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：显示正常的图片效果。