caimei-applets-store/pages/tabBar/category/category.vue

<template>
    <view class="category">
        <!-- 侧边导航 -->
        <scroll-view class="slide-navbar" :scroll-y="true">
            <template v-for="(item, index) in navbar">
                <view
                    class="slide"
                    :class="{ active: index === current }"
                    :key="item.id"
                    v-text="item.name"
                    @click="onClick(item, index)"
                ></view>
            </template>
        </scroll-view>
        <!-- 右侧容器 -->
        <scroll-view
            class="panel"
            :scroll-y="true"
            :scroll-with-animation="true"
            :scroll-top="scrollTop"
            @scroll="onScroll"
        >
            <view class="cate" v-for="cate in categories" :key="cate.id">
                <image class="cate-icon" :src="cate.image"></image>
                <view class="cate-name" v-text="cate.name"></view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { fetchProductTypeFirst, fetchProductTypeSecond } from '@/services/api/goods.js'
export default {
    data() {
        return {
            categories: [
                {
                    id: 1,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=1'
                },
                {
                    id: 2,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=2'
                },
                {
                    id: 3,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=3'
                },
                {
                    id: 4,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 6,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 5,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 7,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 8,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 9,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 10,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 11,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 12,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 13,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 14,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 15,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 16,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 17,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 18,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 19,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 20,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 21,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 22,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                },
                {
                    id: 23,
                    name: '防晒霜',
                    image: 'https://picsum.photos/200/200?random=4'
                }
            ],
            navbar: [
                {
                    name: '中胚层产品',
                    id: 1
                },
                {
                    name: '抗衰除皱',
                    id: 2
                },
                {
                    name: '术后修复',
                    id: 3
                },
                {
                    name: 'SPA产品',
                    id: 4
                },
                {
                    name: '面部护理',
                    id: 5
                },
                {
                    name: '耗材',
                    id: 6
                },
                {
                    name: '临期产品',
                    id: 7
                }
            ],
            current: 1,
            oldScrollTop: 0,
            scrollTop: 100
        }
    },
    onShow() {
        this.fetchProductTypeFirst()
    },
    methods: {
        onClick(item, index) {
            this.current = index
            this.scrollTop = this.oldScrollTop
            this.$nextTick(() => {
                this.scrollTop = 0
            })
        },

        onScroll(e) {
            this.oldScrollTop = e.detail.scrollTop
        },

        // 获取一级商品分了列表
        async fetchProductTypeFirst() {
            try {
                const { data } = await fetchProductTypeFirst()
                console.log(data)
            } catch (e) {
                console.log(e)
            }
        },

        // 获取二级商品分了列表
        fetchProductTypeSecond() {}
    }
}
</script>

<style lang="scss" scoped>
.category {
    @extend .cm-flex-between;
    align-items: flex-start;
    background-color: #fff;

    .slide-navbar {
        width: 200rpx;
        height: 100vh;
        background-color: #f7f7f7;
        box-sizing: border-box;

        .slide {
            width: 100%;
            height: 94rpx;
            text-align: center;
            line-height: 94rpx;
            font-size: 28rpx;
            color: #666666;
            background-color: #f7f7f7;

            &.active {
                background-color: #fff;
                color: #ff457b;
            }
        }
    }
    .panel {
        width: 550rpx;
        height: 100vh;
        padding-bottom: 40rpx;
        background-color: #fff;
        box-sizing: border-box;

        &::after {
            content: '';
            display: block;
            clear: both;
        }

        .cate {
            float: left;
            margin-top: 40rpx;
            margin-left: 40rpx;
            @extend .cm-flex-center;
            flex-direction: column;
            .cate-icon {
                display: block;
                width: 128rpx;
                height: 128rpx;
            }

            .cate-name {
                @include ellipsis(1);
                width: 100%;
                margin-top: 16rpx;
                color: #666;
                font-size: 26rpx;
                text-align: center;
            }
        }
    }
}
</style>