UNIAPP实战项目笔记9 推荐店铺模块开发和滑块处理

爱被打了一巴掌 2024-04-06 13:00 79阅读 0赞

### 推荐店铺模块开发和滑块处理 ###

#### 实例图片 ####

![推荐店铺模块处理][1984576a930345509760a33b7ae3b85a.png]

#### 新建 Shop 组件 在index组件目录下 ####

*  Shop.vue

<template>
            <view class="shop">
                <view class="shop-item">
                    <view class="shop-big">
                       <image class="shop-big" src="../../static/img/b3.jpg" mode=""></image> 
                    </view>
                    <scroll-view class="scroll-content" scroll-x="true" >
                        <view class="scroll-item">
                            <Commodity 
                            :dataList="shopList"
                            wrap='no-wrap'
                            itemW="200rpx"
                            bigH="200rpx"
                            nameSize="20rpx"
                            ></Commodity>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </template>
    
        <script>
        import Commodity from '../common/Commodity.vue'
        export default{
        
            data(){
        
                return{
        
                    shopList:[
                        {
        
                            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"
                        },
                        {
        
                            id:4,
                            imgUrl:"../../static/logo.png",
                            name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                            pprice:"299",
                            oprice:"659",
                            discount:"5.2"
                        }
                    ]
                }
            },
            components:{
        
                Commodity
            }
        }
        </script>
    
        <style lang="scss">
        .shop-big{
        
            width: 100%;
            height: 350rpx;
        }
        .scroll-content{
        
            width: 100%;
            white-space: nowrap;
            height: 350rpx;
        }
        .scroll-item{
        
            display: inline-block;
            width: 300rpx;
            height: 300rpx;
        }
        </style>

#### Commodity 组件 ####

*  Commodity.vue

<template>
            <view class="commodity" 
                :style="'flex-wrap:'+wrap+';'"
            >
                
                <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" :style="'font-size:'+nameSize+';'">{
        {
        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" /* 通过传参数来改变组件默认样式*/
                    },
                    // 是否换行
                    wrap:{
        
                        type:String,
                        default:"wrap" /* 通过传参数来改变组件默认样式*/
                    },
                    //商品文字大小
                    nameSize:{
        
                        type:String,
                        default:"26rpx"
                    }
                }
            }
        </script>
    
        <style lang="scss">
        .commodity{
        
            display: flex;
        }
        .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首页 ####

*  index.vue

<template>
            <view class="content">
                <view class="index">
                    
                    <Card cardTitle='运动户外'></Card>
                    <Banner></Banner>
                    <Icons></Icons>
                    <Card cardTitle='热销爆品'></Card>
                    <Hot></Hot>
                    <Card cardTitle='店铺推荐'></Card>
                    <Shop></Shop>
                    
                </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';//引入
            import Shop from '@/components/index/Shop.vue';//引入
            export default {
        
                data() {
        
                    return {
        
                        title: 'Hello'
                    }
                },
                components:{
        
                    IndexSwiper, //注册
                    Recommend,
                    Card,
                    CommodityList,
                    Banner,
                    Icons,
                    Hot,
                    Shop
                    
                },
                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>

[1984576a930345509760a33b7ae3b85a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9ab4656a4bae4922af96c4cb3dc84a9b.png