UNIAPP实战项目笔记4 推荐商品部分开发

╰半夏微凉° 2024-04-06 12:48 77阅读 0赞

#### 推荐: ####

1.  顶部滑动导航
2.  swiper
    
     *  名称: IndexSwiper
     *  封装: 是
3.  推荐商品  
    名称: Recommend  
    封装: 是

#### 推荐商品部分开发 ####

*  新建Rcommend.vue组件 在 index组件目录下

<template>
            <view class="recommend bg-color">
                <view class="recommend-item">
                    <image class="item-big" src="../../static/img/b3.jpg" mode=""></image>
                    <view class="item-small">
                        <image class="item-img" src="../../static/logo.png" mode=""></image>
                        <image class="item-img" src="../../static/logo.png" mode=""></image>
                        <image class="item-img" src="../../static/logo.png" mode=""></image>
                    </view>
                </view>
                
                <view class="recommend-item">
                    <image class="item-big" src="../../static/img/b3.jpg" mode=""></image>
                    <view class="item-small">
                        <image class="item-img" src="../../static/logo.png" mode=""></image>
                        <image class="item-img" src="../../static/logo.png" mode=""></image>
                        <image class="item-img" src="../../static/logo.png" mode=""></image>
                    </view>
                </view>
            </view>
        </template>
    
        <script>
        </script>
    
        <style lang="scss">
        .recommend{
        
            padding: 20rpx;
        }
        .recommend-item{
        
            display: flex;
            flex-direction: column;
            border-radius: 20rpx;
            border: 2rpx solid #ccc;
            overflow: hidden;
            margin: 20rpx 0;
        }
        .item-big{
        
            width: 100%;
            height: 300rpx;
        }
        .item-small{
        
            width: 100%;
            height: 240rpx;
        }
        .item-img{
        
            width: 33.33333%;
            height: 240rpx;
        }
        </style>

*  文件夹common下common.css 代码

/* 全局css */
    
        /* 默认字体颜色 */
        .f-color{
        
            color: #636263;
        }
        /* 选中字体颜色 */
        .f-active-color{
        
            color: #40bdfb;
        }
        /* 背景色 */
        .bg-color{
        
            background-color: #42b7fb;
        }

*  index.vue 引入并注册 Recommend 组件

<template>
            <view class="content">
                <view class="index">
                    <IndexSwiper></IndexSwiper>
                    <Recommend></Recommend>
                </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';//引入
            export default {
        
                data() {
        
                    return {
        
                        title: 'Hello'
                    }
                },
                components:{
        
                    IndexSwiper, //注册
                    Recommend
                    
                },
                onLoad() {
        
    
                },
                methods: {
        
    
                }
            }
        </script>

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

![推荐部分实例图片][6c0c0b4592bd47bd897e8d820083293d.png]

[6c0c0b4592bd47bd897e8d820083293d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7f3b3b4fe6234b04b98fac900cceeff4.png