更新记录
1.0.8(2025-05-14) 下载此版本
更新说明文挡
1.0.7(2025-05-13) 下载此版本
解决部分小程序banner显示异常问题
1.0.6(2025-05-13) 下载此版本
优化组件
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | √ | - | - | - |
hbxw-swiper组件
介绍
方了更方便使用swiper实现图片轮播效果,特封此组件
使用示例
推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。
<template>
<view class="swiper-container">
<text class="test-title">swiper示例0</text>
<hbxw-swiper
:list="list"
indicatorType="circle"
:previousMargin="0"
:nextMargin="0"
:padding="0"
:height="300"
@change="swiperChange"
@click="swiperItemClick"
></hbxw-swiper>
<text class="test-title">swiper示例1</text>
<hbxw-swiper :list="list" indicatorType="circle"></hbxw-swiper>
<text class="test-title">swiper示例2</text>
<hbxw-swiper :list="list" indicatorType="square"></hbxw-swiper>
<text class="test-title">swiper示例3</text>
<hbxw-swiper :list="list0" indicatorType="progress"></hbxw-swiper>
<text class="test-title">swiper示例4</text>
<hbxw-swiper :list="list0" indicatorType="number"></hbxw-swiper>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE0',
title: 'EXAMPLE0'
},{
img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE1',
title: 'EXAMPLE1'
},{
img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE2',
title: 'EXAMPLE2'
},{
img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE3',
title: 'EXAMPLE3'
}
],
list0: [
{
img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE0'
},{
img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE1'
},{
img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE2'
},{
img: 'https://placehold.jp/999999/ff4400/750x300.png?text=EXAMPLE3'
}
],
}
},
methods: {
swiperChange(e) {
console.log('---- swiperChange ----:', e);
},
swiperItemClick(item) {
console.log('---- swiperItemClick ----:', item);
}
}
}
</script>
<style lang="scss" scoped>
.test-title{
font-size: 32rpx;
font-weight: 700;
line-height: 56rpx;
padding: 20rpx 10rpx;
color: #111111;
}
.swiper-container{
padding-bottom: 64rpx;
}
</style>
API
Props
属性名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
list | Array | null | 是 | 轮播数据,例如[{img: '...',title: '...'}] 如果不想有文字条,不传title即可 |
duration | Number | 1000 | 否 | 滑动动画时长 |
interval | Number | 3000 | 否 | 自动切换时间间隔 |
autoplay | Boolean | true | 否 | 是否自动播放 |
height | Number | 260 | 否 | swiper高度,单位rpx |
previousMargin | Number | 40 | 否 | 上一张swiper露出多少rpx |
nextMargin | Number | 40 | 否 | 下一张swiper露出多少rpx |
padding | Number | 20 | 否 | 相邻swiper中间间距 |
circular | Boolean | true | 否 | 是否无缝滚动 |
indicatorType | String | circle | 否 | 指示器款式circle(圆形)/square(方形)/progress (进度条)/number (数字),如果不需要指示器,传''即可 |
isSlotMain | Boolean | false | 否 | 是否要使用main插槽,因兼容问题,想自定swiper主内容必须先把它设为true |
Events
事件名 | 说明 | 返回值 |
---|---|---|
change | 轮播切换时触发的事件 | 事件对象event event.detail = {current: 2, currentItemId: "", source: "autoplay"} |
click | 轮播被点击时触发的事件 | 被点击的轮播项数据,根据数据做不同的逻辑处理 |
Slots
插槽名 | 说明 | 作用域参数 |
---|---|---|
main | 自定义swiper主内容,因兼容问题,如果想使用main插槽,请先设置isSlotMain为true | { item: Object,index: number, currentIndex: number } |
indicator | 自定义指示器 | { list:Array, currentIndex: number } |
注意事项
- 暴露了swiper使用率高的参数和方法,详见官方文挡:swiper
- 组件源码很小的,显示大是因为有示例图片,真正打包到项目中的是很小的,请放心使用