123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255 |
- <template>
- <view
- class="u-swiper"
- :style="{
- backgroundColor: bgColor,
- height: $u.addUnit(height),
- borderRadius: $u.addUnit(radius)
- }"
- >
- <view
- class="u-swiper__loading"
- v-if="loading"
- >
- <u-loading-icon mode="circle"></u-loading-icon>
- </view>
- <swiper
- v-else
- class="u-swiper__wrapper"
- :style="{
- height: $u.addUnit(height),
- }"
- @change="change"
- :circular="circular"
- :interval="interval"
- :duration="duration"
- :autoplay="autoplay"
- :current="current"
- :currentItemId="currentItemId"
- :previousMargin="$u.addUnit(previousMargin)"
- :nextMargin="$u.addUnit(nextMargin)"
- :acceleration="acceleration"
- :displayMultipleItems="displayMultipleItems"
- :easingFunction="easingFunction"
- >
- <swiper-item
- class="u-swiper__wrapper__item"
- v-for="(item, index) in list"
- :key="index"
- >
- <view
- class="u-swiper__wrapper__item__wrapper"
- :style="[itemStyle(index)]"
- >
-
- <image
- class="u-swiper__wrapper__item__wrapper__image"
- v-if="getItemType(item) === 'image'"
- :src="getSource(item)"
- :mode="imgMode"
- @tap="clickHandler(index)"
- :style="{
- height: $u.addUnit(height),
- borderRadius: $u.addUnit(radius)
- }"
- ></image>
- <video
- class="u-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 && $u.test.object(item) && item.title ? item.title : ''"
- :style="{
- height: $u.addUnit(height)
- }"
- controls
- @tap="clickHandler(index)"
- ></video>
- <text
- v-if="showTitle && $u.test.object(item) && item.title && $u.test.image(getSource(item))"
- class="u-swiper__wrapper__item__wrapper__title u-line-1"
- >{{ item.title }}</text>
- </view>
- </swiper-item>
- </swiper>
- <view class="u-swiper__indicator" :style="[$u.addStyle(indicatorStyle)]">
- <slot name="indicator">
- <u-swiper-indicator
- v-if="!loading && indicator && !showTitle"
- :indicatorActiveColor="indicatorActiveColor"
- :indicatorInactiveColor="indicatorInactiveColor"
- :length="list.length"
- :current="currentIndex"
- :indicatorMode="indicatorMode"
- ></u-swiper-indicator>
- </slot>
- </view>
- </view>
- </template>
- <script>
- import props from './props.js';
-
- export default {
- name: 'u-swiper',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
- currentIndex: 0
- }
- },
- watch: {
- current(val, preVal) {
- if(val === preVal) return;
- this.currentIndex = val;
- }
- },
- computed: {
- itemStyle() {
- return index => {
- const style = {}
-
-
-
- if (this.nextMargin && this.previousMargin) {
- style.borderRadius = uni.$u.addUnit(this.radius)
- if (index !== this.currentIndex) style.transform = 'scale(0.92)'
- }
-
- return style
- }
- }
- },
- methods: {
- getItemType(item) {
- if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
- if (typeof item === 'object' && this.keyName) {
- if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
- if (item.type === 'image') return 'image'
- if (item.type === 'video') return 'video'
- return 'image'
- }
- },
-
- getSource(item) {
- if (typeof item === 'string') return item
- if (typeof item === 'object' && this.keyName) return item[this.keyName]
- else uni.$u.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 (uni.$u.test.video(lastItem)) {
-
- const video = uni.createVideoContext(`video-${index}`, this)
- video.pause()
- }
- },
-
- getPoster(item) {
- return typeof item === 'object' && item.poster ? item.poster : ''
- },
-
- clickHandler(index) {
- this.$emit('click', index)
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- .u-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;
- padding: 12rpx 24rpx;
- color: #FFFFFF;
- flex: 1;
- }
- }
- }
- }
- &__indicator {
- position: absolute;
- bottom: 10px;
- }
- }
- </style>
|