小程序电商类首页组件

示例：搜索框使用search组件，之前封装过
代码：

<template>
    <view class="content" :style="{ height: pageHeight, overflow: 'hidden' }">
        <view class="search">
            <!-- <input class="searchbox" placeholder="请输入搜索关键词" /> -->
            <search @search="disableScroll" />
        </view>
        <!-- 轮播图 -->
        <view class="imgbox">
            <swiper indicator-dots class="imgitem">
                <navigator
                    url="https://www.baidu.com/"
                    v-for="(item, index) in imgList"
                    :key="index"
                >
                    <swiper-item>
                        <image :src="item.image_src"></image> </swiper-item
                ></navigator>
            </swiper>
        </view>
        <!-- 分类 -->
        <view class="cate">
            <ul class="libox">
                <li v-for="(item, index) in cateList" :key="index">
                    <image :src="item.image_src"></image>
                </li>
            </ul>
        </view>
        <!-- 时尚女装 -->

        <view id="top" v-for="(item, index) in mainList" :key="index">
            <view class="girl"
                ><image :src="item.floor_title.image_src"></image
            ></view>
            <view class="banner_one">
                <view class="left"
                    ><image :src="item.product_list[0].image_src"></image
                ></view>
                <view class="right1"
                    ><image :src="item.product_list[1].image_src"></image
                ></view>
                <view class="right2"
                    ><image :src="item.product_list[2].image_src"></image
                ></view>
                <view class="right3"
                    ><image :src="item.product_list[3].image_src"></image
                ></view>
                <view class="right4"
                    ><image :src="item.product_list[4].image_src"></image
                ></view>
            </view>
        </view>
        <view
            v-if="scrollTop > 0"
            @click="goTop"
            class="goTop iconfont icon-huidingbu"
        >
        </view>
    </view>
</template>

<script>
import search from '../../components/search'
export default {
    data() {
        return {
            pageHeight: 'auto',
            imgList: [],
            cateList: [],
            mainList: [],
            scrollTop: 0,
        }
    },
    onLoad() {},
    created() {
        // 进来发请求获取轮播图
        this.getimgArr()
        // 进来发请求获取分类
        this.getCate()
        // 进来发请求获取楼层;
        this.getMain()
    },
    methods: {
        disableScroll(e) {
            // console.log(e)
            this.pageHeight = e.pageHeight
        },
        // 获取轮播图
        async getimgArr() {
            const res = await this.http({
                url: '/api/public/v1/home/swiperdata',
                method: 'get',
            })
            console.log(res[1].data.message, 1111)
            this.imgList = res[1].data.message
        },
        // 获取分类
        async getCate() {
            const res = await uni.request({
                url: 'https://www.uinav.com/api/public/v1/home/catitems',
            })
            console.log(res[1].data.message)
            this.cateList = res[1].data.message
        },
        // 获取楼层
        async getMain() {
            const res = await this.http({
                url: '/api/public/v1/home/floordata',
            })
            console.log(res[1].data.message)
            this.mainList = res[1].data.message
        },
        async onPullDownRefresh() {
            console.log('下拉了')
            await this.getimgArr()
            await this.getCate()
            await this.getMain()
            //终止下拉动画效果
            uni.stopPullDownRefresh()
        },
        // 监听页面滚动
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
        },
        // 回到顶部
        goTop() {
            uni.pageScrollTo({ scrollTop: 0 })
        },
    },
    components: { search },
}
</script>

<style lang="less" scoped>
.goTop {
    position: fixed;
    right: 5px;
    bottom: 30px;
    z-index: 3;
    font-size: 30px;
}
#top {
    height: 280px;
    width: 100%;
}
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .banner_one {
        width: 100%;
        height: 180px;
        background-color: #fffffc;
        position: relative;
        image {
            width: 100%;
            height: 100%;
        }
        .left {
            width: 100px;
            height: 100%;
            background: chocolate;
        }
        .right1 {
            position: absolute;
            left: 110px;
            top: 0px;
            width: 140px;
            height: 49%;
            background: cornflowerblue;
        }
        .right2 {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 120px;
            height: 49%;
            background: fuchsia;
        }
        .right3 {
            position: absolute;
            bottom: 0px;
            left: 110px;
            width: 120px;
            height: 49%;
            background: yellow;
        }
        .right4 {
            position: absolute;
            bottom: 0px;
            right: 0;
            width: 140px;
            height: 49%;
            background: red;
        }
    }
    .girl {
        width: 100%;
        height: 50px;
        background-color: #f4f4f4;

        image {
            width: 100%;
            height: 80%;
            margin-top: 10px;
        }
    }
    .cate {
        width: 100%;

        .libox {
            width: 100%;
            background-color: #ffffff;
            list-style: none;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 110px;
            li {
                display: flex;
                flex-direction: column;
                image {
                    width: 50px;
                    height: 50px;
                }
            }
        }
    }
    .imgbox {
        width: 100%;
        height: 300rpx;
        background-color: aqua;
        .imgitem {
            width: 100%;
            height: 300rpx;
            image {
                width: 100%;
                height: 300rpx;
            }
        }
    }
}

.logo {
    height: 200rpx;
    width: 200rpx;
    margin: 200rpx auto 50rpx auto;
}

.text-area {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 36rpx;
    color: #8f8f94;
}
</style>