ieplus-oldapp/uni_modules/uv-swiper/components/uv-swiper/uv-swiper.vue

<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)]"
                >
                    <slot v-bind="{item, 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>
                    </slot>
                </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>