You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
340 lines
9.7 KiB
340 lines
9.7 KiB
<template> |
|
<view class="u-swiper-wrap" :style="{ |
|
borderRadius: `${borderRadius}rpx` |
|
}"> |
|
<swiper :current="elCurrent" @change="change" @animationfinish="animationfinish" :interval="interval" :circular="circular" :duration="duration" :autoplay="autoplay" |
|
:previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" :next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" |
|
:style="{ |
|
height: height + 'rpx', |
|
backgroundColor: bgColor |
|
}"> |
|
<swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index"> |
|
<view class="u-list-image-wrap" @tap.stop.prevent="listClick(index)" :class="[uCurrent != index ? 'u-list-scale' : '']" :style="{ |
|
borderRadius: `${borderRadius}rpx`, |
|
transform: effect3d && uCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)', |
|
margin: effect3d && uCurrent != index ? '0 20rpx' : 0, |
|
}"> |
|
<image class="u-swiper-image" :src="item[name] || item" :mode="imgMode"></image> |
|
<view v-if="title && item.title" class="u-swiper-title u-line-1" :style="[{ |
|
'padding-bottom': titlePaddingBottom |
|
}, titleStyle]"> |
|
{{ item.title }} |
|
</view> |
|
</view> |
|
</swiper-item> |
|
</swiper> |
|
<view class="u-swiper-indicator" :style="{ |
|
top: indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight' ? '12rpx' : 'auto', |
|
bottom: indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight' ? '12rpx' : 'auto', |
|
justifyContent: justifyContent, |
|
padding: `0 ${effect3d ? '74rpx' : '24rpx'}` |
|
}"> |
|
<block v-if="mode == 'rect'"> |
|
<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == uCurrent }" v-for="(item, index) in list" |
|
:key="index"></view> |
|
</block> |
|
<block v-if="mode == 'dot'"> |
|
<view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == uCurrent }" v-for="(item, index) in list" |
|
:key="index"></view> |
|
</block> |
|
<block v-if="mode == 'round'"> |
|
<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == uCurrent }" v-for="(item, index) in list" |
|
:key="index"></view> |
|
</block> |
|
<block v-if="mode == 'number'"> |
|
<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ list.length }}</view> |
|
</block> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
/** |
|
* swiper 轮播图 |
|
* @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用 |
|
* @tutorial https://www.uviewui.com/components/swiper.html |
|
* @property {Array} list 轮播图数据，见官网"基本使用"说明 |
|
* @property {Boolean} title 是否显示标题文字，需要配合list参数，见官网说明（默认false） |
|
* @property {String} mode 指示器模式，见官网说明（默认round） |
|
* @property {String Number} height 轮播图组件高度，单位rpx（默认250） |
|
* @property {String} indicator-pos 指示器的位置（默认bottomCenter） |
|
* @property {Boolean} effect3d 是否开启3D效果（默认false） |
|
* @property {Boolean} autoplay 是否自动播放（默认true） |
|
* @property {String Number} interval 自动轮播时间间隔，单位ms（默认2500） |
|
* @property {Boolean} circular 是否衔接播放，见官网说明（默认true） |
|
* @property {String} bg-color 背景颜色（默认#f3f4f6） |
|
* @property {String Number} border-radius 轮播图圆角值，单位rpx（默认8） |
|
* @property {Object} title-style 自定义标题样式 |
|
* @property {String Number} effect3d-previous-margin mode = true模式的情况下，激活项与前后项之间的距离，单位rpx（默认50） |
|
* @property {String} img-mode 图片的裁剪模式，详见image组件裁剪模式（默认aspectFill） |
|
* @event {Function} click 点击轮播图时触发 |
|
* @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper> |
|
*/ |
|
export default { |
|
name: "u-swiper", |
|
props: { |
|
// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选 |
|
list: { |
|
type: Array, |
|
default () { |
|
return []; |
|
} |
|
}, |
|
// 是否显示title标题 |
|
title: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
// 用户自定义的指示器的样式 |
|
indicator: { |
|
type: Object, |
|
default () { |
|
return {}; |
|
} |
|
}, |
|
// 圆角值 |
|
borderRadius: { |
|
type: [Number, String], |
|
default: 8 |
|
}, |
|
// 隔多久自动切换 |
|
interval: { |
|
type: [String, Number], |
|
default: 3000 |
|
}, |
|
// 指示器的模式，rect|dot|number|round |
|
mode: { |
|
type: String, |
|
default: 'round' |
|
}, |
|
// list的高度，单位rpx |
|
height: { |
|
type: [Number, String], |
|
default: 250 |
|
}, |
|
// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight |
|
indicatorPos: { |
|
type: String, |
|
default: 'bottomCenter' |
|
}, |
|
// 是否开启缩放效果 |
|
effect3d: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
// 3D模式的情况下，激活item与前后item之间的距离，单位rpx |
|
effect3dPreviousMargin: { |
|
type: [Number, String], |
|
default: 50 |
|
}, |
|
// 是否自动播放 |
|
autoplay: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 自动轮播时间间隔，单位ms |
|
duration: { |
|
type: [Number, String], |
|
default: 500 |
|
}, |
|
// 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张 |
|
circular: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 图片的裁剪模式 |
|
imgMode: { |
|
type: String, |
|
default: 'aspectFill' |
|
}, |
|
// 从list数组中读取的图片的属性名 |
|
name: { |
|
type: String, |
|
default: 'image' |
|
}, |
|
// 背景颜色 |
|
bgColor: { |
|
type: String, |
|
default: '#f3f4f6' |
|
}, |
|
// 初始化时，默认显示第几项 |
|
current: { |
|
type: [Number, String], |
|
default: 0 |
|
}, |
|
// 标题的样式，对象形式 |
|
titleStyle: { |
|
type: Object, |
|
default() { |
|
return {} |
|
} |
|
} |
|
}, |
|
watch: { |
|
// 如果外部的list发生变化，判断长度是否被修改，如果前后长度不一致，重置uCurrent值，避免溢出 |
|
list(nVal, oVal) { |
|
if(nVal.length !== oVal.length) this.uCurrent = 0; |
|
}, |
|
// 监听外部current的变化，实时修改内部依赖于此测uCurrent值，如果更新了current，而不是更新uCurrent， |
|
// 就会错乱，因为指示器是依赖于uCurrent的 |
|
current(n) { |
|
this.uCurrent = n; |
|
} |
|
}, |
|
data() { |
|
return { |
|
uCurrent: this.current // 当前活跃的swiper-item的index |
|
}; |
|
}, |
|
computed: { |
|
justifyContent() { |
|
if (this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start'; |
|
if (this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center'; |
|
if (this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end'; |
|
}, |
|
titlePaddingBottom() { |
|
let tmp = 0; |
|
if (this.mode == 'none') return '12rpx'; |
|
if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode == 'number') { |
|
tmp = '60rpx'; |
|
} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode != 'number') { |
|
tmp = '40rpx'; |
|
} else { |
|
tmp = '12rpx'; |
|
} |
|
return tmp; |
|
}, |
|
// 因为uni的swiper组件的current参数只接受Number类型，这里做一个转换 |
|
elCurrent() { |
|
return Number(this.current); |
|
} |
|
}, |
|
methods: { |
|
listClick(index) { |
|
this.$emit('click', index); |
|
}, |
|
change(e) { |
|
let current = e.detail.current; |
|
this.uCurrent = current; |
|
// 发出change事件，表示当前自动切换的index，从0开始 |
|
this.$emit('change', current); |
|
}, |
|
// 头条小程序不支持animationfinish事件，改由change事件 |
|
// 暂不监听此事件，因为不再给swiper绑定uCurrent属性 |
|
animationfinish(e) { |
|
// #ifndef MP-TOUTIAO |
|
// this.uCurrent = e.detail.current; |
|
// #endif |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "../../libs/css/style.components.scss"; |
|
|
|
.u-swiper-wrap { |
|
position: relative; |
|
overflow: hidden; |
|
transform: translateY(0); |
|
} |
|
|
|
.u-swiper-image { |
|
width: 100%; |
|
will-change: transform; |
|
height: 100%; |
|
/* #ifndef APP-NVUE */ |
|
display: block; |
|
/* #endif */ |
|
/* #ifdef H5 */ |
|
pointer-events: none; |
|
/* #endif */ |
|
} |
|
|
|
.u-swiper-indicator { |
|
padding: 0 24rpx; |
|
position: absolute; |
|
@include vue-flex; |
|
width: 100%; |
|
z-index: 1; |
|
} |
|
|
|
.u-indicator-item-rect { |
|
width: 26rpx; |
|
height: 8rpx; |
|
margin: 0 6rpx; |
|
transition: all 0.5s; |
|
background-color: rgba(0, 0, 0, 0.3); |
|
} |
|
|
|
.u-indicator-item-rect-active { |
|
background-color: rgba(255, 255, 255, 0.8); |
|
} |
|
|
|
.u-indicator-item-dot { |
|
width: 14rpx; |
|
height: 14rpx; |
|
margin: 0 6rpx; |
|
border-radius: 20rpx; |
|
transition: all 0.5s; |
|
background-color: rgba(0, 0, 0, 0.3); |
|
} |
|
|
|
.u-indicator-item-dot-active { |
|
background-color: rgba(255, 255, 255, 0.8); |
|
} |
|
|
|
.u-indicator-item-round { |
|
width: 14rpx; |
|
height: 14rpx; |
|
margin: 0 6rpx; |
|
border-radius: 20rpx; |
|
transition: all 0.5s; |
|
background-color: rgba(0, 0, 0, 0.3); |
|
} |
|
|
|
.u-indicator-item-round-active { |
|
width: 34rpx; |
|
background-color: rgba(255, 255, 255, 0.8); |
|
} |
|
|
|
.u-indicator-item-number { |
|
padding: 6rpx 16rpx; |
|
line-height: 1; |
|
background-color: rgba(0, 0, 0, 0.3); |
|
border-radius: 100rpx; |
|
font-size: 26rpx; |
|
color: rgba(255, 255, 255, 0.8); |
|
} |
|
|
|
.u-list-scale { |
|
transform-origin: center center; |
|
} |
|
|
|
.u-list-image-wrap { |
|
width: 100%; |
|
height: 100%; |
|
flex: 1; |
|
transition: all 0.5s; |
|
overflow: hidden; |
|
box-sizing: content-box; |
|
position: relative; |
|
} |
|
|
|
.u-swiper-title { |
|
position: absolute; |
|
background-color: rgba(0, 0, 0, 0.3); |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
font-size: 28rpx; |
|
padding: 12rpx 24rpx; |
|
color: rgba(255, 255, 255, 0.9); |
|
} |
|
|
|
.u-swiper-item { |
|
@include vue-flex; |
|
overflow: hidden; |
|
align-items: center; |
|
} |
|
</style>
|
|
|