更新记录

1.1.6（2025-04-09）

更新

1.1.5（2025-04-09）

增加预览功能，和说明文件

1.1.4（2024-09-14）

更新说明

平台兼容性

next-swiper-group --分组导航轮播，广告展示等场景,可开箱即用，多平台测试通过

遇到问题或有建议可以加入QQ群(455948571)反馈
如果觉得组件不错，给五星鼓励鼓励咯！

如果有使用问题请加群

注意：如果插件问题，请务必给一个完整的复现demo，谢谢配合； 点击链接加入群聊前端开发（uniapp插件）】

使用注意

1. 如何你是在微信小程序平台使用，该插件的下载功能需要用到相册的功能，你需要到你uniapp项目的manifest.json文件中添加如下权限scope.writePhotosAlbum

   "mp-weixin" : {
   "permission" : {
       "scope.writePhotosAlbum" : {
           "desc" : "你的相册将用于小程序内容展示"
       }
   },
   },

   next-swiper-group 组件 props说明

使用demo

export default {
    props: {
        dataList: {
                type: Array,
                default: () => []
                /**
                 * 
                     数据格式说明：[{
                                dict: 'a',  
                                src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                                title: '昨夜星辰昨夜风，画楼西畔桂堂东',
                        },{
                                dict: 'b',
                                src: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                                title: '身无彩凤双飞翼，心有灵犀一点通'
                        },{
                                dict: 'a',
                                src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                                title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
                        }, {
                                src: 'https://cdn.uviewui.com/uview/resources/video.mp4',
                                title: '昨夜星辰昨夜风，画楼西畔桂堂东',
                                poster: 'https://img0.baidu.com/it/u=3338260662,707633225&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                                type: 'video'   // 默认会根据链接自动判断swiper-item类型，但是在极端情况下可能会不准确，所以我们提供了指定item的类型，通过设置type为video或image
                        }]
                 */
        },
        // dataList 里面对应字典关键字的配置
        dataListDictKeyName: {
                type: String,
                default: 'dict'
        },
        // dataList 里面对应文件资源关键字的配置
        dataListFileSrcKeyName: {
            type: String,
            default: 'src'
        },
        // dataList 里面对应文件资源封面关键字的配置
        dataListFilePosterKeyName: {
            type: String,
            default: 'poster'
        },
        // 是否显示标题，要求数组对象中有title属性
        showTitle: {
            type: Boolean,
            default: false,
        },
        // 分类字典选项配置
        dictOptions: {
                type: Array,
                default: () => []
        },
        // 分类字典绑定关键值value配置
        dictKey: {
                type: String,
                default: 'value'
        },
        // 分类字典绑定关键标题title配置，
        dictTitle: {
                type: String,
                default: 'title'
        },
        // 组件高度
        height: {
            type: [String, Number],
            default: 130
        },
        // 是否自动切换
        autoplay: {
            type: Boolean,
            default: true
        },
        // 滑块切换过程所需时间
        duration: {
            type: [String, Number],
            default: 300
        },
        // 是否加载中
        loading: {
            type: Boolean,
            default: false
        },
        // 是否显示分类字典tabsBar
        showTabsBar: {
            type: Boolean,
            default: true
        },
        // tabsBar的宽度配置，所有的分类选项会等分改配置
        // 注意如果字典选项的title的字符长度全不相同，这时候需要给tabsBarWidth设定一个固定值，使得每个选项等分该宽度
        tabsBarWidth: {
            type: [String, Number]
        },
        // 是否显示分类字典汇总
        showPageSummary: {
                type: Boolean,
                default: true
            }
    },
        // 模式配置 可选值['common', 'preview']
        mode: {
            type: String,
            default: 'common'
        },
        // 图片的裁剪模式
        imgMode: {
            type: String,
            default: 'aspectFill'
        },
        // 是否可以图片预览
        ifPreviewImage: {
            type: Boolean,
            default: true
        },
}

使用

从uniapp插件市场导入

<template>
    <view class="index">
        <next-swiper-group
          :dataList="dataList"
          :dictOptions="dictOptions"
            :showTitle="false"
            :height="180"
            :loading="false"
            :autoplay="false"
        ></next-swiper-group>
    </view>
</template>

<script>
    import { ref, nextTick, toRefs, toRaw, unref } from 'vue'

    export default {
        setup() {
            const dataList = ref([{
                    dict: 'a',
                    src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    title: '昨夜星辰昨夜风，画楼西畔桂堂东',
            },{
                    dict: 'b',
                    src: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    title: '身无彩凤双飞翼，心有灵犀一点通'
            },{
                    dict: 'a',
                    src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
            }, {
                    src: 'https://cdn.uviewui.com/uview/resources/video.mp4',
                    title: '昨夜星辰昨夜风，画楼西畔桂堂东',
                    poster: 'https://img0.baidu.com/it/u=3338260662,707633225&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                    type: 'video'
            }, {
                    dict: 'c',
                    src: 'https://cdn.uviewui.com/uview/resources/video.mp4',
                    title: '昨夜星辰昨夜风，画楼西畔桂堂东',
                    type: 'video'
            }, {
                    src: 'https://img1.baidu.com/it/u=2812417321,4100104782&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
                    title: '',
                    poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
            }, {
                    src: 'https://img0.baidu.com/it/u=872191938,2315298208&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                    title: '',
                    dict: 'b',
            }, {
                    src: 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                    title: '',
                    dict: 'b',
            }])
            const dictOptions = ref([{
                value: 'a',
                title: '视频'
            }, {
                value: 'b',
                title: '户型'
            }, {
                value: 'c',
                title: '图片'
            }])
            return {
                dataList,
                dictOptions
            }
        }
    }
</script>

微信小程序在线体验

app Demo安装包下载

appDemo安装包下载地址：android安装包;

预览

mode=common(普通模式演示效果)	mode=preview(预览模式演示效果)

Event 事件

参考

参考 Swiper 轮播图