可滚动分类商品List列表可用于电商分类列表

更新记录

1.0.2（2023-11-25）下载此版本

增加插件使用说明，优化组件

1.0.1（2023-11-11）下载此版本

优化组件

1.0.0（2023-11-11）下载此版本

创建组件

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.8.7 app-vue app-nvue	√	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

使用方法

引入xg-list-item uni-grid xg-tab组件        

事件处理如下：     
// 分类标题点击
            cateTitleTap(index) {
                console.log("分类标题点击 " + index);
                this.titleCurrentIndex = index;
            },
            // 分类条目点击
            cateItemClick(item){

                console.log("分类条目点击 " + JSON.stringify(item));

            }

HTML代码实现部分

<template>
    <view class="page">
        <!-- #ifdef MP-WEIXIN -->
        <uni-nav-bar fixed status-bar>
            <view slot="left" class="nav-bar-search-bar" :style="{width: searchBarWidth + 'px'}">
                <tpl-search-bar cancelButton="none" :radius="10000" />
            </view>

        </uni-nav-bar>
        <!-- #endif -->

        <view class="page-content">
            <xg-tab-title class="cate-tab-title-list" :vertical="true">
                <xg-tab-title-item v-for="(cateTabTitle, cateTabTitleIndex) of cateTabTitles" :key="cateTabTitleIndex">
                    <view class="cate-tab-title"
                        :class="{'cate-tab-title-selected': titleCurrentIndex === cateTabTitleIndex, 'cate-tab-title-last': (titleCurrentIndex - 1) === cateTabTitleIndex, 'cate-tab-title-next': (titleCurrentIndex + 1) === cateTabTitleIndex}"
                        @tap="cateTitleTap(cateTabTitleIndex)">
                        <text class="cate-tab-title-text"
                            :class="{'cate-tab-title-text-selected': titleCurrentIndex === cateTabTitleIndex}">{{cateTabTitle}}</text>
                    </view>
                </xg-tab-title-item>
            </xg-tab-title>

            <xg-list class="bg-color-white cate-tab-content"
                :class="{'border-top-left-radius-common': titleCurrentIndex !== 0}" :scroll-y="true"
                :show-scrollbar="false">
                <xg-list-item v-for="(cate, cate_index) of cates" :key="cate_index">
                    <view class="cate_box" v-if="titleCurrentIndex === cate_index">
                        <swiper v-if="cate.slideshows&&(1 < cate.slideshows.length)" class="slideshow-swiper"
                            :indicator-dots="true" :circular="true" :autoplay="true" :interval="5000" :duration="500">
                            <swiper-item v-for="(slideshow, slidshowIndex) of cate.slideshows" :key="slidshowIndex">
                                <navigator class="slideshow-item" hover-class="none" :url="slideshow.url">
                                    <image class="slideshow-item-image" :src="slideshow.image" mode=""></image>
                                </navigator>
                            </swiper-item>
                        </swiper>
                        <navigator v-else class="slideshow-item" hover-class="none" :url="cate.slideshows[0].url">
                            <image class="slideshow-item-image" :src="cate.slideshows[0].image" mode=""></image>
                        </navigator>

                        <view class="cate-list">
                            <view class="margin-top-lg cate-level1"
                                v-for="(cate_level1, cate_level1_index) of cate.children" :key="cate_level1_index">
                                <text class="font-size-lg">{{cate_level1.name}}</text>
                                <uni-grid :column="3" :square="false" :highlight="false" :showBorder="false">
                                    <uni-grid-item v-for="(cate_level2, cate_level2_index) of cate_level1.children"
                                         :key="cate_level2_index">
                                        <navigator class="margin-top-base cate-level2" hover-class="none" @click="cateItemClick(cate_level2)"
                                            url="/pages/product/list">
                                            <image class="margin-top-base border-radius-lg cate-level2-image"
                                                :src="cate_level2.image" mode=""></image>
                                            <text class="font-size-base margin-top-base">{{cate_level2.name}}</text>
                                        </navigator>
                                    </uni-grid-item>
                                </uni-grid>
                            </view>
                        </view>
                    </view>

                </xg-list-item>
            </xg-list>
        </view>

        <!-- #ifdef H5 -->
        <view class="tab-bar"></view>
        <!-- #endif -->
    </view>
</template>

<script>
    import data from '@/data/cate/cate';
    import config from './config';

    export default {
        mixins: [config],
        data() {
            return {
                titleCurrentIndex: 0,
                cateTabTitles: [],
                cates: [],
            };
        },
        async onLoad() {
            const catesPromise = data.cates();
            const cateTabTitlesPromise = data.cateTabTitles();

            this.cateTabTitles = await cateTabTitlesPromise;
            this.cates = await catesPromise;
        },
        // #ifndef MP-WEIXIN
        onNavigationBarButtonTap(e) {
            const index = e.index;

            //点击导航栏消息按钮
            if (1 === index) {

            }
        },
        // #endif

        methods: {
            // 分类标题点击
            cateTitleTap(index) {
                console.log("分类标题点击 " + index);
                this.titleCurrentIndex = index;
            },
            // 分类条目点击
            cateItemClick(item){

                console.log("分类条目点击 " + JSON.stringify(item));

            }
        },
    }
</script>

<style lang="scss" scoped>
    /* #ifdef H5 */
    .tab-bar {
        height: var(--window-bottom);
    }

    /* #endif */

    .page {
        position: fixed;
        top: 0;
        /* #ifdef H5 */
        top: var(--window-top);
        /* #endif */
        right: 0;
        bottom: 0;
        left: 0;

        @include flex-layout(column);
    }

    .nav-bar {
        /* #ifndef APP-NVUE */
        z-index: 1000;
        /* #endif */
    }

    .nav-bar-search-bar {
        // width: 500rpx;
    }

    .page-content {
        flex: 1;
    }

    $border-radius-common: 30rpx;

    .border-top-left-radius-common {
        border-top-left-radius: $border-radius-common;
    }

    // .border-top-right-radius-common {
    //  border-top-right-radius: $border-radius-common;
    // }
    // 左侧标题区
    $tab-title-width: 200rpx;
    $tab-content-width: 751rpx - $tab-title-width;

    .cate-tab-title-list {
        width: $tab-title-width;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;

        background-color: $uni-color-white;
    }

    .cate-tab-title {
        @include flex-layout(row, center, center);

        height: 100rpx;
        background-color: $page-bg-color;
    }

    .cate-tab-title-text {
        font-size: $uni-font-size-lg;
    }

    .cate-tab-title-last {
        border-bottom-right-radius: $border-radius-common;
    }

    .cate-tab-title-next {
        border-top-right-radius: $border-radius-common;
    }

    .cate-tab-title-selected {
        background-color: $uni-color-white;
    }

    .cate-tab-title-text-selected {
        font-size: $uni-font-size-xl;
        font-weight: bold;
    }

    // 右侧内容区
    .cate-tab-content {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: $tab-content-width;

        border-top-right-radius: $border-radius-common;
    }

    .cate_box {
        margin: $uni-spacing-row-base $uni-spacing-col-lg;
    }

    $slideshow-item-image-width: 750rpx - $tab-title-width - 2*$uni-spacing-col-lg;
    $slideshow-item-image-height: $slideshow-item-image-width*7/16;

    .slideshow-swiper {
        height: $slideshow-item-image-height;
    }

    .slideshow-item {
        @include flex-layout(row, center, center);
    }

    .slideshow-item-image {
        width: $slideshow-item-image-width;
        height: $slideshow-item-image-height;
    }

    .cate-list {}

    .cate-level1 {}

    .cate-level2 {
        @include flex-layout(column, center, center);
    }

    .cate-level2-image {
        width: 150rpx;
        height: 150rpx;
    }
</style>

可滚动分类商品List列表可用于电商分类列表列表 滚动 cate list 商品列表

更新记录

1.0.2（2023-11-25）下载此版本

1.0.1（2023-11-11）下载此版本

1.0.0（2023-11-11）下载此版本

平台兼容性

使用方法

HTML代码实现部分

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

自定义简单实用中国省市区三级联动选择器picker 设置收获地址界面模版(适配vue3)

基于uQRCode封装的二维码生成插件生成二维码并返回图片地址

基于原生input增强选择picker插件用于地图定位选择位置页面跳转选择数据

ccDropDownMenu简单实用通用下拉框下拉筛选框下拉菜单

自定义精美海报生成组件根据自定义数据字段生成海报长按保存海报图片

可滚动分类商品List列表 可用于电商分类列表 列表 滚动 cate list 商品列表

更新记录

1.0.2（2023-11-25） 下载此版本

1.0.1（2023-11-11） 下载此版本

1.0.0（2023-11-11） 下载此版本

平台兼容性

使用方法

HTML代码实现部分

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

自定义简单实用中国省市区三级联动选择器picker 设置收获地址界面模版(适配vue3)

基于uQRCode封装的二维码生成插件 生成二维码并返回图片地址

基于原生input增强选择picker插件用于地图定位选择位置 页面跳转选择数据

ccDropDownMenu简单实用通用下拉框 下拉筛选框 下拉菜单

自定义精美海报生成组件 根据自定义数据字段生成海报 长按保存海报图片

Modal title

可滚动分类商品List列表可用于电商分类列表列表滚动 cate list 商品列表

1.0.2（2023-11-25）下载此版本

1.0.1（2023-11-11）下载此版本

1.0.0（2023-11-11）下载此版本

基于uQRCode封装的二维码生成插件生成二维码并返回图片地址

基于原生input增强选择picker插件用于地图定位选择位置页面跳转选择数据

ccDropDownMenu简单实用通用下拉框下拉筛选框下拉菜单

自定义精美海报生成组件根据自定义数据字段生成海报长按保存海报图片