|
@@ -0,0 +1,216 @@
|
|
|
+<template>
|
|
|
+ <view class="uv-swiper" :style="{
|
|
|
+ backgroundColor: bgColor,
|
|
|
+ height: $uv.addUnit(height),
|
|
|
+ borderRadius: $uv.addUnit(radius)
|
|
|
+ }">
|
|
|
+ <view class="uv-swiper__loading" v-if="loading">
|
|
|
+ <uv-loading-icon mode="circle"></uv-loading-icon>
|
|
|
+ </view>
|
|
|
+ <swiper v-else class="uv-swiper__wrapper" :style="{
|
|
|
+ height: $uv.addUnit(height),
|
|
|
+ flex: 1
|
|
|
+ }" @change="change" :circular="circular" :vertical="vertical" :interval="interval" :duration="duration"
|
|
|
+ :autoplay="autoplay" :current="current" :currentItemId="currentItemId"
|
|
|
+ :previousMargin="$uv.addUnit(previousMargin)" :nextMargin="$uv.addUnit(nextMargin)"
|
|
|
+ :acceleration="acceleration" :displayMultipleItems="displayMultipleItems" :easingFunction="easingFunction">
|
|
|
+ <swiper-item class="uv-swiper__wrapper__item" v-for="(item, index) in list" :key="index">
|
|
|
+ <view class="uv-swiper__wrapper__item__wrapper" :style="[itemStyle(index)]">
|
|
|
+ <!-- 在nvue中,image图片的宽度默认为屏幕宽度,需要通过flex:1撑开,另外必须设置高度才能显示图片 -->
|
|
|
+ <image class="uv-swiper__wrapper__item__wrapper__image" v-if="getItemType(item) === 'image'"
|
|
|
+ :src="getSource(item)" :mode="imgMode" @tap="clickHandler(index)" :style="{
|
|
|
+ height: $uv.addUnit(height),
|
|
|
+ borderRadius: $uv.addUnit(radius)
|
|
|
+ }"></image>
|
|
|
+ <video class="uv-swiper__wrapper__item__wrapper__video" v-if="getItemType(item) === 'video'"
|
|
|
+ :id="`video-${index}`" :enable-progress-gesture="false" :src="getSource(item)"
|
|
|
+ :poster="getPoster(item)"
|
|
|
+ :title="showTitle && $uv.test.object(item) && item.title ? item.title : ''" :style="{
|
|
|
+ height: $uv.addUnit(height)
|
|
|
+ }" controls @tap="clickHandler(index)"></video>
|
|
|
+ <text v-if="showTitle && $uv.test.object(item) && item.title"
|
|
|
+ class="uv-swiper__wrapper__item__wrapper__title uv-line-1"
|
|
|
+ :style="[$uv.addStyle(titleStyle)]">{{ item.title }}</text>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="uv-swiper__indicator" :style="[$uv.addStyle(indicatorStyle)]">
|
|
|
+ <slot name="indicator">
|
|
|
+ <uv-swiper-indicator v-if="!loading && indicator && !showTitle"
|
|
|
+ :indicatorActiveColor="indicatorActiveColor" :indicatorInactiveColor="indicatorInactiveColor"
|
|
|
+ :length="list.length" :current="currentIndex" :indicatorMode="indicatorMode"></uv-swiper-indicator>
|
|
|
+ </slot>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
|
|
+ import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
|
|
+ import props from './props.js';
|
|
|
+ /**
|
|
|
+ * Swiper 轮播图
|
|
|
+ * @description 该组件一般用于导航轮播,广告展示等场景,可开箱即用,
|
|
|
+ * @tutorial https://www.uvui.cn/components/swiper.html
|
|
|
+ * @property {Array} list 轮播图数据
|
|
|
+ * @property {Boolean} indicator 是否显示面板指示器(默认 false )
|
|
|
+ * @property {String} indicatorActiveColor 指示器非激活颜色(默认 '#FFFFFF' )
|
|
|
+ * @property {String} indicatorInactiveColor 指示器的激活颜色(默认 'rgba(255, 255, 255, 0.35)' )
|
|
|
+ * @property {String | Object} indicatorStyle 指示器样式,可通过bottom,left,right进行定位
|
|
|
+ * @property {String} indicatorMode 指示器模式(默认 'line' )
|
|
|
+ * @property {Boolean} autoplay 是否自动切换(默认 true )
|
|
|
+ * @property {String | Number} current 当前所在滑块的 index(默认 0 )
|
|
|
+ * @property {String} currentItemId 当前所在滑块的 item-id ,不能与 current 被同时指定
|
|
|
+ * @property {String | Number} interval 滑块自动切换时间间隔(ms)(默认 3000 )
|
|
|
+ * @property {String | Number} duration 滑块切换过程所需时间(ms)(默认 300 )
|
|
|
+ * @property {Boolean} circular 播放到末尾后是否重新回到开头(默认 false )
|
|
|
+ * @property {String | Number} previousMargin 前边距,可用于露出前一项的一小部分,nvue和支付宝不支持(默认 0 )
|
|
|
+ * @property {String | Number} nextMargin 后边距,可用于露出后一项的一小部分,nvue和支付宝不支持(默认 0 )
|
|
|
+ * @property {Boolean} acceleration 当开启时,会根据滑动速度,连续滑动多屏,支付宝不支持(默认 false )
|
|
|
+ * @property {Number} displayMultipleItems 同时显示的滑块数量,nvue、支付宝小程序不支持(默认 1 )
|
|
|
+ * @property {String} easingFunction 指定swiper切换缓动动画类型, 只对微信小程序有效(默认 'default' )
|
|
|
+ * @property {String} keyName list数组中指定对象的目标属性名(默认 'url' )
|
|
|
+ * @property {String} imgMode 图片的裁剪模式(默认 'aspectFill' )
|
|
|
+ * @property {String | Number} height 组件高度(默认 130 )
|
|
|
+ * @property {String} bgColor 背景颜色(默认 '#f3f4f6' )
|
|
|
+ * @property {String | Number} radius 组件圆角,数值或带单位的字符串(默认 4 )
|
|
|
+ * @property {Boolean} loading 是否加载中(默认 false )
|
|
|
+ * @property {Boolean} showTitle 是否显示标题,要求数组对象中有title属性(默认 false )
|
|
|
+ * @event {Function(index)} click 点击轮播图时触发 index:点击了第几张图片,从0开始
|
|
|
+ * @event {Function(index)} change 轮播图切换时触发(自动或者手动切换) index:切换到了第几张图片,从0开始
|
|
|
+ * @example <uv-swiper :list="list4" keyName="url" :autoplay="false"></uv-swiper>
|
|
|
+ */
|
|
|
+ export default {
|
|
|
+ name: 'uv-swiper',
|
|
|
+ mixins: [mpMixin, mixin, props],
|
|
|
+ emits: ['click', 'change'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentIndex: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ current(val, preVal) {
|
|
|
+ if (val === preVal) return;
|
|
|
+ this.currentIndex = val; // 和上游数据关联上
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ itemStyle() {
|
|
|
+ return index => {
|
|
|
+ const style = {}
|
|
|
+ // #ifndef APP-NVUE || MP-TOUTIAO
|
|
|
+ // 左右流出空间的写法不支持nvue和头条
|
|
|
+ // 只有配置了此二值,才加上对应的圆角,以及缩放
|
|
|
+ if (this.nextMargin && this.previousMargin) {
|
|
|
+ style.borderRadius = this.$uv.addUnit(this.radius)
|
|
|
+ if (index !== this.currentIndex) style.transform = 'scale(0.92)'
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ return style
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getItemType(item) {
|
|
|
+ if (typeof item === 'string') return this.$uv.test.video(this.getSource(item)) ? 'video' : 'image'
|
|
|
+ if (typeof item === 'object' && this.keyName) {
|
|
|
+ if (!item.type) return this.$uv.test.video(this.getSource(item)) ? 'video' : 'image'
|
|
|
+ if (item.type === 'image') return 'image'
|
|
|
+ if (item.type === 'video') return 'video'
|
|
|
+ return 'image'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取目标路径,可能数组中为字符串,对象的形式,额外可指定对象的目标属性名keyName
|
|
|
+ getSource(item) {
|
|
|
+ if (typeof item === 'string') return item
|
|
|
+ if (typeof item === 'object' && this.keyName) return item[this.keyName]
|
|
|
+ else this.$uv.error('请按格式传递列表参数')
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ // 轮播切换事件
|
|
|
+ change(e) {
|
|
|
+ // 当前的激活索引
|
|
|
+ const {
|
|
|
+ current
|
|
|
+ } = e.detail
|
|
|
+ this.pauseVideo(this.currentIndex)
|
|
|
+ this.currentIndex = current
|
|
|
+ this.$emit('change', e.detail)
|
|
|
+ },
|
|
|
+ // 切换轮播时,暂停视频播放
|
|
|
+ pauseVideo(index) {
|
|
|
+ const lastItem = this.getSource(this.list[index])
|
|
|
+ if (this.$uv.test.video(lastItem)) {
|
|
|
+ // 当视频隐藏时,暂停播放
|
|
|
+ const video = uni.createVideoContext(`video-${index}`, this)
|
|
|
+ video.pause()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 当一个轮播item为视频时,获取它的视频海报
|
|
|
+ getPoster(item) {
|
|
|
+ return typeof item === 'object' && item.poster ? item.poster : ''
|
|
|
+ },
|
|
|
+ // 点击某个item
|
|
|
+ clickHandler(index) {
|
|
|
+ this.$emit('click', index)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ $show-lines: 1;
|
|
|
+ @import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
|
|
|
+ @import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
|
|
+
|
|
|
+ .uv-swiper {
|
|
|
+ @include flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &__wrapper {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ &__item {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ &__wrapper {
|
|
|
+ @include flex;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: transform 0.3s;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ &__image {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__video {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__title {
|
|
|
+ position: absolute;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__indicator {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|