给子组件传参数动态改变组件样式
运动户外:
- 顶部滑动导航
- 封装: 否
- 头图
- 名称: Banner
- 封装: 是
- 宫格
- 名称: Icons
- 封装: 是
- 热销爆品
- 名称: Hot
- 封装: 是
热销爆品开发和修改商品值
Hot 组件
- Hot.vue
<template>
<view class="hot">
<Commodity :dataList="hotList" itemW='250rpx' bigH="250rpx"></Commodity>
</view>
</template>
<script>
import Commodity from '../common/Commodity.vue'
export default{
data(){
return {
hotList:[
//示例数据
{
id:1,
imgUrl:"../../static/logo.png",
name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
pprice:"299",
oprice:"659",
discount:"5.2"
},
{
id:2,
imgUrl:"../../static/logo.png",
name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
pprice:"299",
oprice:"659",
discount:"5.2"
},{
id:3,
imgUrl:"../../static/logo.png",
name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
pprice:"299",
oprice:"659",
discount:"5.2"
}
]
}
},
components:{
Commodity
}
}
</script>
<style>
</style>
调用并动态设置组件的宽和高
子组件Commodity 组件
- Commodity.vue
<template>
<view class="commodity">
<!-- 单个商品组件 -->
<view class="commodity-item"
v-for="(item,index) in dataList"
:key="index"
:style="'width:'+itemW+';'"
>
<image
class="commodity-img"
:src="item.imgUrl"
:style="'height:'+bigH+';'"
mode=""
></image>
<view class="commodity-content">
<text class="commodity-name">{{item.name}}</text>
<view class="">
<text class="pprice">${{item.pprice}}</text>
<text class="oprice">${{item.oprice}}</text>
</view>
<text class="discount">{{item.discount}}折</text>
</view>
</view>
</view>
</template>
<script>
/* 接受数据 dataList*/
export default {
props:{
dataList:Array,
itemW:{
type:String,
default:"375rpx" /* 通过传参数来改变组件默认样式*/
},
bigH:{
type:String,
default:"375rpx" /* 通过传参数来改变组件默认样式*/
},
}
}
</script>
<style lang="scss">
.commodity{
display: flex;
flex-wrap: wrap;
}
.commodity-item{
padding-bottom: 20rpx;
}
.commodity-img{
width: 100%;
}
.commodity-content{
text-align: center;
}
.commodity-name{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
color: #333;
word-break: break-all;
padding: 6rpx 20rpx;
}
.oprice{
text-decoration: line-through;
font-size: 24rpx;
color: #999;
}
.discount{
border-radius: 4rpx;
border: 1px solid #FF3333;
padding: 2rpx 10rpx;
font-size: 20rpx;
color: #FF3333;
}
</style>
接受父组件传来的参数 动态设置样式
首页 index.vue 页面
- Hot.vue
<template>
<view class="content">
<view class="index">
<!-- <IndexSwiper></IndexSwiper>
<Recommend></Recommend>
<Card cardTitle='猜你喜欢'></Card>
<CommodityList></CommodityList> -->
<Card cardTitle='运动户外'></Card>
<Banner></Banner>
<Icons></Icons>
<Card cardTitle='热销爆品'></Card>
<Hot></Hot>
</view>
<view class="f-active-color">
文字
</view>
<view class="iconfont icon-xiaoxi"></view>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
import IndexSwiper from '@/components/index/indexSwiper.vue';//引入
import Recommend from '@/components/index/Recommend.vue';//引入
import Card from '@/components/common/Card.vue';//引入
import CommodityList from '@/components/common/CommodityList.vue';//引入
import Banner from '@/components/index/Banner.vue';//引入
import Icons from '@/components/index/Icons.vue';//引入
import Hot from '@/components/index/Hot.vue';//引入
export default {
data() {
return {
title: 'Hello'
}
},
components:{
IndexSwiper, //注册
Recommend,
Card,
CommodityList,
Banner,
Icons,
Hot
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.index{
width: 100%;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
通过给组件传参数的形式动态改变组件的样式
- 实例图片