UNIAPP实战项目笔记8 热销爆品开发和修改商品值给子组件传参数动态改变组件样式

浅浅的花香味﹌ 2024-04-06 12:57 48阅读 0赞

### 给子组件传参数动态改变组件样式 ###

#### 运动户外: ####

1.  顶部滑动导航
    
     *  封装: 否
2.  头图
    
     *  名称: Banner
     *  封装: 是
3.  宫格
    
     *  名称: Icons
     *  封装: 是
4.  热销爆品
    
     *  名称: 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">
                    
                    <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>

> 通过给组件传参数的形式动态改变组件的样式

1.  实例图片  
    ![传参动态改变样式][93526f32fc734e1292126f99a45523d9.png]

[93526f32fc734e1292126f99a45523d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0f21c34743e449b09ada3db8561852ca.png