更新记录

1.0.0（2024-01-10） 下载此版本

uniappx 自定义可滑动轮播宫格组件，可支持两行和单行，暂时只支持安卓

平台兼容性

uni-app

uni-app x

youlan-nav-swiper

uniappx 自定义可滑动轮播宫格组件，可支持两行和单行，暂时只支持安卓

开发文档

引入组件

复制代码// 根据你所在的目录引用
import youlanNavSwiper from '@/uni_modules/youlan-nav-swiper/utssdk/app-android/index.vue';

注册组件

复制代码// 具体的使用教程建议下载我提供的完整案例
components: {
    youlanNavSwiper
},

// dataArr 是一个二维数组，用来区分不同的宫格， 下面是模拟数据
dataArr: [
    [
        {
            "imgSrc": '/static/iconfont.png',
            "text": "健康药房",
            "imgSize": '60rpx',
            "fontSize": '24rpx',
            id: 1
        },
        {
            "imgSrc": '/static/iconfont.png',
            "text": "健康药房",
            "imgSize": '60rpx',
            "fontSize": '24rpx',
            id: 2
        },
        {
            "imgSrc": '/static/iconfont.png',
            "text": "健康药房",
            "imgSize": '60rpx',
            "fontSize": '24rpx',
            id: 3
        },
        {
            "imgSrc": '/static/iconfont.png',
            "text": "健康药房",
            "imgSize": '60rpx',
            "fontSize": '24rpx',
            id: 4
        },
    ],
    [
        {
            "imgSrc": '/static/iconfont.png',
            "text": "健康药房",
            "imgSize": '60rpx',
            "fontSize": '24rpx',
            id: 5
        },
        {
            "imgSrc": '/static/iconfont.png',
            "text": "健康药房",
            "imgSize": '60rpx',
            "fontSize": '24rpx',
            id: 6
        },
    ]
]

使用方式

复制代码<youlanNavSwiper 
    :indicatorColor="option.indicatorColor"
    :indicatorColorActive="option.indicatorColorActive"
    :lineSum="5"
    :multiLine="option.multiLine"
    :indicatorDots="option.indicatorDots"
    :dataArr="dataArr"
    @submit="submit"
/>

属性说明

方法说明