更新记录

1.0.1（2024-07-31） 下载此版本

有用户反映加载数据有延时，增加配置是否等到swiper切换完成再请求数据

1.0.0（2024-07-26） 下载此版本

新增

平台兼容性

uni-app

uni-app x

hbxw-classification组件

介绍

分类展示组件，支持完全自定义UI

组件提供默认一个初始UI，但考虑到不同UI需求，组件支持通过插槽实现完全自定义

具名插槽nav自定义左边侧边导航

具名插槽content自定义右边内容

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view>
        <hbxw-classification 
      @getClassificationDetail="getClassificationDetail"  
      @getClassification="getClassification"
      @bannerClick="bannerClick"
      @itemClick="itemClick"
    />
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
      // 模拟请求类别
      getClassificationRequest() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve([
              {
                id: 'nav0',
                name: '类别类别类别00'
              },
              {
                id: 'nav1',
                name: '类别1'
              },
              {
                id: 'nav2',
                name: '类别2'
              },
              {
                id: 'nav3',
                name: '类别3'
              },
              {
                id: 'nav4',
                name: '类别4'
              },
              {
                id: 'nav5',
                name: '类别5'
              },
              {
                id: 'nav6',
                name: '类别6'
              },
              {
                id: 'nav7',
                name: '类别7'
              },
              {
                id: 'nav8',
                name: '类别8'
              },
              {
                id: 'nav9',
                name: '类别9'
              },
              {
                id: 'nav10',
                name: '类别10'
              },
              {
                id: 'nav11',
                name: '类别11'
              },
              {
                id: 'nav12',
                name: '类别12'
              },
              {
                id: 'nav12',
                name: '类别12'
              },
              {
                id: 'nav13',
                name: '类别13'
              },
              {
                id: 'nav14',
                name: '类别14'
              },
              {
                id: 'nav15',
                name: '类别15'
              },
            ])
          }, 2000);
        })
      },

      // 模拟请求类别下的详细数据
      getClassificationDetailRequest(navItem) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({
              banner: 'https://placehold.jp/999999/ffffff/560x160.png?text=banner-'+navItem.name,
              data: [
                {
                  type: navItem.name+'-子分类0',
                  items: [
                    {
                      id: 'type0_0',
                      name: '商品商品商品0_0',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type0_1',
                      name: '商品0_1',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type0_2',
                      name: '商品0_2',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type0_3',
                      name: '商品0_3',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type0_4',
                      name: '商品0_4',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type0_5',
                      name: '商品0_5',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type0_6',
                      name: '商品0_6',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type0_7',
                      name: '商品0_7',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type0_8',
                      name: '商品0_8',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                  ]
                },{
                  type: navItem.name+'-子分类1',
                  items: [
                    {
                      id: 'type1_0',
                      name: '商品1_0',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type1_1',
                      name: '商品1_1',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type1_2',
                      name: '商品1_2',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type1_3',
                      name: '商品1_3',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type1_4',
                      name: '商品1_4',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                    {
                      id: 'type1_5',
                      name: '商品1_5',
                      imageUrl: 'https://placehold.jp/999999/ffffff/300x300.png?text=配图-'+navItem.name
                    },
                  ]
                },
              ]
            })
          }, 2000);
        })
      },

            getClassificationDetail(navItem, done) {
        this.getClassificationDetailRequest(navItem).then((res) => {
          done(res);
        }) 
      },
      getClassification(done) {
         this.getClassificationRequest().then((res) => {
           done(res);
         })
      },

      bannerClick(item) {
        console.log('---- bannerClick ----:', item);
      },

      itemClick(item) {
        console.log('---- itemClick ----:', item);
      }
        }
    }
</script>

<style>

</style>

API

Props

Event

注：包体积显示较大,是因为有示例图片，真正会打包到项目中的体积是很小的