更新记录
1.1.3(2024-04-24)
updated
1.1.2(2024-04-16)
增加下载
1.1.1(2023-08-07)
修复css变量报错问题
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
√ |
√ |
√ |
× |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
√ |
√ |
√ |
√ |
× |
√ |
√ |
× |
next-swiper-group --分组导航轮播,广告展示等场景,可开箱即用,多平台测试通过
遇到问题或有建议可以加入QQ群(455948571)反馈
如果觉得组件不错,给五星鼓励鼓励咯!
next-swiper-group 组件 props说明
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>
预览
mode=common(普通模式演示效果) |
mode=preview(预览模式演示效果) |
|
|
参数
可选参数属性列表
参数名 |
说明 |
类型 |
是否必填 |
默认值 |
可选值 |
dataList |
资源列表 |
Array |
是 |
[] |
- |
dataListDictKeyName |
dataList 里面对应字典关键字的配置 |
String |
否 |
dict |
- |
dataListFileSrcKeyName |
dataList 里面对应文件资源关键字的配置 |
String |
否 |
src |
- |
dataListFilePosterKeyName |
dataList 里面对应文件资源封面关键字的配置 |
String |
否 |
poster |
- |
showTitle |
是否显示标题,要求dataList数组对象中有title属性 |
Boolean |
否 |
false |
true |
dictOptions |
分类字典选项配置 |
Array |
否 |
[] |
- |
dictKey |
分类字典绑定关键值value配置 |
String |
否 |
value |
- |
dictTitle |
分类字典绑定关键标题title配置 |
String |
否 |
title |
- |
height |
组件高度 |
Number |
否 |
130 |
- |
autoplay |
是否自动切换 |
Boolean |
否 |
true |
false |
duration |
滑块切换过程所需时间 |
Number |
否 |
300 |
- |
loading |
是否加载中 |
Boolean |
否 |
false |
true |
showTabsBar |
是否显示分类字典tabsBar |
Boolean |
否 |
true |
false |
tabsBarWidth |
tabsBar的宽度配置,所有的分类选项会等分改配置 |
[String Number] |
否 |
true |
false |
showPageSummary |
是否显示分类字典汇总 |
Boolean |
否 |
- |
- |
mode |
模式配置 |
String |
否 |
common |
preview |
imgMode |
图片显示模式配置(见文档:图片模式) |
String |
否 |
aspectFill |
- |
ifPreviewImage |
是否可以图片预览 |
Boolean |
否 |
true |
false |
Event 事件
事件名 |
说明 |
类型 |
回调参数 |
change |
swiper切换时的结果,返回当前资源的数据源 |
emit |
Object |
tabItemClick |
tabs点击时触发,返回当前数据的数据源 |
emit |
Object |
swiperItemClick |
swiper点击时触发,返回当前数据的数据源 |
emit |
Object |
参考
参考 Swiper 轮播图