更新记录

1.1.1(2021-11-11)

修复轮播图视频播放,手势滑动,在非app端情况下开启设置

1.1.0(2021-10-18)

1、修复app,触摸video视频轮播切换失效问题 2、修改视频轮播为暂停切换封面图,封面图为必填项 3、添加文件类型映射键fileType

1.0.5(2021-09-13)

app视频滑动存在部分问题,暂时取消app滑动支持

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 2.9.10 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

zc-swiper

## 注:
# 当前轮播图实现方式非最优方式,近期较忙,只能写成这样
# 各位路过的大神有改好的方案,求学习

注:平台兼容性目前只测试了安卓,h5,chrome,微信小程序,显示x的可以自己试试,nvue用户可以使用在线工具转换scss为css,https://www.sassmeister.com/

props支持的属性:

# 接收数据list的属性
# {
#   type:video(视频) image照片
#   topTip:'顶部提示',      
#   poster:'视频封面',  //=>视频类生效    
#   src:'视频地址或图片地址',   
#   bottomTip:'底部提示',   
#   currentTime:12,//=>视频类生效    
# }
list:{//滑块视图容器数据
    type:Array,
    default:_=>[
        {
            type:'video',  
            topTip:'顶部提示',
            poster:'https://img2.baidu.com/it/u=2141851239,1037607188&fm=26&fmt=auto&gp=0.jpg',
            src:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
            bottomTip:'底部提示',
        },
        {type:'image', src:'https://img0.baidu.com/it/u=875130878,1196408569&fm=11&fmt=auto&gp=0.jpg'},
        {type:'image', src:'https://img2.baidu.com/it/u=293682470,1155349941&fm=26&fmt=auto&gp=0.jpg'},
        {type:'image', src:'https://img0.baidu.com/it/u=3464142916,229554071&fm=26&fmt=auto&gp=0.jpg'},
        {
            type:'video', 
            currentTime:120,//初始帧时间---默认缓存存储
            poster:'https://img1.baidu.com/it/u=1297253752,1185196455&fm=26&fmt=auto&gp=0.jpg',
            src:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
        },
        {type:'image', src:'https://img1.baidu.com/it/u=2057763469,3313822915&fm=26&fmt=auto&gp=0.jpg'},
        {type:'image', src:'https://img0.baidu.com/it/u=1570602913,157918019&fm=26&fmt=auto&gp=0.jpg'},
    ]  
},
videoKey:{ type:String, default:'src'},// 视频映射的键
imageKey:{ type:String, default:'src'},//图片映射的键
indicatorPos:{ type:String, default:'bottomCenter'},//指示器的位置:topLeft/topCenter/topRight/bottomLeft/bottomCenter/bottomRight
mode:{ type:String, default:'round' },//指示器样式: default  circle  round index number none时不显示
fullScreen:{ type:Boolean, default:false }, //是否全屏
navHeight:{type:Number, default:44},//顶部导航高度,默认44---垂直全屏状态无导航栏可设置为0
height:{ type:Number, default:160 },//swiper 高度单位px
contentRadius:{ type:String, default:'10rpx' },//盒子圆角设置
topFloat:{ type:Boolean, default:true },//顶部不占位-浮动定位
fotterFloat:{ type:Boolean, default:true },//底部不占位-浮动定位
effect3d:{ type:Boolean, default:false },//是否开启3D效果 注:只有在displayMultipleItems=1时有效 
effect3dMargin:{type: String, default: '40rpx'},//effect3d=true模式下前后间距接受px和rpx值
imgMode:{type: String, default: 'scaleToFill'},//图片的裁剪模式,详见https://uniapp.dcloud.io/component/image
bgColor:{type: String, default: '#f3f4f6'},//swiper背景色
bgColorItem:{type: String, default: 'rgba(0,0,0,0.1)'},//swiper当前项背景色

//顶部与底部设置-注:-顶部与底部根据需求自己拓展---也可用插槽自定义内容
topTextKey:{  type:String, default:'topTip'},//顶部文字说明映射的键
topColor:{ type:String, default:'#FFF'},//顶部文字颜色
topBackground:{  type:String, default:'rgba(0, 0, 0, 0.1)'},//顶部背景色
topTextAlign:{ type:String, default:'left'},//顶部文字位置
bottomTextKey:{  type:String, default:'bottomTip'},//底部文字说明映射的键
bottomColor:{ type:String, default:'#00F'},//底部文字颜色
bottomBackground:{  type:String, default:'rgba(0, 0, 0, 0.1)'},//底部背景色
bottomTextAlign:{ type:String, default:'left'},//底部文字位置
//---end

// ---swiper原生属性-参考https://uniapp.dcloud.io/component/swiper
skipHiddenItemLayout:{ //是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 
    type:Boolean,
    default:false
},
displayMultipleItems:{ type:Number,default:1 },//同时显示的滑块数量
nextMargin:{ // 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 头条小程序不支持
    type:String,
    default:'0rpx'
},
previousMargin:{//前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值头条小程序不支持
    type:String,
    default:'0rpx'
},
vertical:{ type:Boolean, default:false },//滑动方向是否为纵向 卡牌不支持纵向以及同时显示的2块以上滑块数量
circular:{ type:Boolean, default:true },//是否采用衔接滑动
duration:{ type:Number, default:400 },// 滑动动画时长
interval:{ type:Number, default:2500 },// 自动切换时间间隔
current:{ type:Number, default:0 },// 初始化时,默认显示第几项
autoplay:{ type:Boolean, default:true },// 是否自动切换
indicatorDots: { type: Boolean, default: false },//是否显示面板指示点--默认关闭使用自定义指示器mode设置指示器,原生指示器为true时 则不显示自定义指示器 
indicatorColor:{ type:String, default:'rgba(0,0,0,0.3)' },// 指示点颜色
indicatorActiveColor: { type: String, default: '#F1F1F1' },// 选中项指示点颜色 

方法返回 :建议根据业务在$emit()方法中自定义,返回数据结构

    # @clickItem 点击当前swiper返回当前项数据
    # @change 选中项改变,返回基本选中数据
    # @animationfinish 选中项改变,动画结束后返回当前项基本数据

slot支持属性:top,fotter,dot

# 顶部(top)与底部(fotter)插槽支持占位/浮动功能(topFloat、fotterFloat属性控制)
# 组件使用生命slot值 则默认传入中间内容部分,设置高度100%则满屏显示
# slot='top':顶部自定义插槽
# slot='fotter' 底部描述部分自定义插槽 
# slot='dot' 指示器自定义插槽  

注意事项:

  1. 全屏时:如果使用自定义顶部导航栏,需要传入导航栏高度navHeight
  2. indicatorDots=true原生指示器开启时不显示自定义指示器,此时model与indicatorPos属性不可用
  3. 自定义指示器垂直时(vertical=true),indicatorPos属性不生效,当前只支持垂直方向属性设置,可自己拓展(.verticalDot)
  4. 顶部占位 无值则不占位 占位映射键=>topTextKey:{ type:String, default:'topTip'}
  5. 底部占位 无值则不占位 占位映射键=>bottomTextKey:{ type:String, default:'bottomTip'}

隐私、权限声明

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

无-

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

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

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问