staff/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue

<template>
  <view :class="`wd-swiper ${customClass}`" :style="customStyle">
    <swiper
      :adjust-height="adjustHeight"
      :adjust-vertical-height="adjustVerticalHeight"
      class="wd-swiper__track"
      :autoplay="autoplay && !videoPlaying"
      :current="navCurrent"
      :interval="interval"
      :duration="duration"
      :circular="loop"
      :vertical="direction == 'vertical'"
      :easing-function="easingFunction"
      :previous-margin="addUnit(previousMargin)"
      :next-margin="addUnit(nextMargin)"
      :snap-to-edge="snapToEdge"
      :display-multiple-items="displayMultipleItems"
      :style="{ height: addUnit(height) }"
      @change="handleChange"
      @animationfinish="handleAnimationfinish"
    >
      <swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item">
        <video
          v-if="isVideo(item)"
          :id="`video-${index}-${uid}`"
          :style="{ height: addUnit(height) }"
          :src="isObj(item) ? item[valueKey] : item"
          :poster="isObj(item) ? item.poster : ''"
          :class="`wd-swiper__video ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
          @play="handleVideoPaly"
          @pause="handleVideoPause"
          :enable-progress-gesture="false"
          :loop="videoLoop"
          :muted="muted"
          :autoplay="autoplayVideo"
          objectFit="cover"
          @click="handleClick(index, item)"
        />
        <image
          v-else
          :src="isObj(item) ? item[valueKey] : item"
          :class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
          :style="{ height: addUnit(height) }"
          :mode="imageMode"
          @click="handleClick(index, item)"
        />

        <text v-if="isObj(item) && item[textKey]" :class="`wd-swiper__text ${customTextClass}`" :style="customTextStyle">{{ item[textKey] }}</text>
      </swiper-item>
    </swiper>

    <template v-if="indicator">
      <slot name="indicator" :current="currentValue" :total="list.length"></slot>
      <wd-swiper-nav
        v-if="!$slots.indicator"
        :custom-class="customIndicatorClass"
        :type="swiperIndicator.type"
        :current="swiperIndicator.current"
        :total="swiperIndicator.total"
        :direction="swiperIndicator.direction"
        :indicator-position="swiperIndicator.indicatorPosition"
        :min-show-num="swiperIndicator.minShowNum"
        :show-controls="swiperIndicator.showControls"
        @change="handleIndicatorChange"
      />
    </template>
  </view>
</template>
<script lang="ts">
export default {
  name: 'wd-swiper',
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: 'shared'
  }
}
</script>

<script lang="ts" setup>
import wdSwiperNav from '../wd-swiper-nav/wd-swiper-nav.vue'
import { computed, watch, ref, getCurrentInstance } from 'vue'
import { addUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef } from '../common/util'
import { swiperProps, type SwiperList } from './types'
import type { SwiperNavProps } from '../wd-swiper-nav/types'

const props = defineProps(swiperProps)
const emit = defineEmits(['click', 'change', 'animationfinish', 'update:current'])
const navCurrent = ref<number>(props.current) // 当前滑块 swiper使用
const currentValue = ref<number>(props.current) // 当前滑块

/**
 * 更新当前滑块
 * @param current 当前滑块索引
 * @param force 是否强制更新swiper绑定的的current
 */
const updateCurrent = (current: number, force: boolean = false) => {
  currentValue.value = current
  if (force) {
    navCurrent.value = current
  }
  emit('update:current', current)
}

const videoPlaying = ref<boolean>(false) // 当前是否在播放视频

const { proxy } = getCurrentInstance() as any

const uid = ref<string>(uuid())

watch(
  () => props.current,
  (val) => {
    if (val < 0) {
      props.loop ? goToEnd() : goToStart()
    } else if (val >= props.list.length) {
      props.loop ? goToStart() : goToEnd()
    } else {
      navTo(val)
    }
  }
)

const swiperIndicator = computed(() => {
  const { list, direction, indicatorPosition, indicator } = props
  const swiperIndicator: Partial<SwiperNavProps> = {
    current: currentValue.value || 0,
    total: list.length || 0,
    direction: direction || 'horizontal',
    indicatorPosition: indicatorPosition || 'bottom'
  }
  if (isObj(indicator)) {
    swiperIndicator.type = indicator.type || 'dots'
    swiperIndicator.minShowNum = indicator.minShowNum || 2
    swiperIndicator.showControls = indicator.showControls || false
  }
  return swiperIndicator
})

const getMediaType = (item: string | SwiperList, type: 'video' | 'image') => {
  const checkType = (url: string) => (type === 'video' ? isVideoUrl(url) : isImageUrl(url))

  if (isObj(item)) {
    return item.type && ['video', 'image'].includes(item.type) ? item.type === type : checkType(item[props.valueKey])
  } else {
    return checkType(item)
  }
}

const isVideo = (item: string | SwiperList) => {
  return getMediaType(item, 'video')
}

const isImage = (item: string | SwiperList) => {
  return getMediaType(item, 'image')
}

function navTo(index: number) {
  if (index === currentValue.value) return
  updateCurrent(index, true)
}

function goToStart() {
  navTo(0)
}

function goToEnd() {
  navTo(props.list.length - 1)
}

// 视频播放
function handleVideoPaly() {
  props.stopAutoplayWhenVideoPlay && (videoPlaying.value = true)
}

// 视频暂停
function handleVideoPause() {
  videoPlaying.value = false
}

/**
 * 是否为当前滑块的前一个滑块
 * @param current
 * @param index
 * @param list
 */
function isPrev(current: number, index: number, list: string[] | SwiperList[]) {
  return (current - 1 + list.length) % list.length === index
}

/**
 * 是否为当前滑块的后一个滑块
 * @param current
 * @param index
 * @param list
 */
function isNext(current: number, index: number, list: string[] | SwiperList[]) {
  return (current + 1 + list.length) % list.length === index
}

function getCustomItemClass(current: number, index: number, list: string[] | SwiperList[]) {
  let customItemClass: string = ''
  if (isPrev(current, index, list)) {
    customItemClass = props.customPrevClass || props.customPrevImageClass
  }
  if (isNext(current, index, list)) {
    customItemClass = props.customNextClass || props.customNextImageClass
  }
  return customItemClass
}

/**
 * 轮播滑块切换时触发
 */
function handleChange(e: { detail: { current: number; source: string } }) {
  const { current, source } = e.detail
  const previous = currentValue.value
  emit('change', { current, source })
  if (current !== currentValue.value) {
    const forceUpdate = source === 'autoplay' || source === 'touch'
    updateCurrent(current, forceUpdate)
  }
  handleVideoChange(previous, current)
}

/**
 * 处理视频切换
 */
function handleVideoChange(previous: number, current: number) {
  handleStopVideoPaly(previous)
  handleStartVideoPaly(current)
}

/**
 * 开始播放指定视频
 * @param index
 */
function handleStartVideoPaly(index: number) {
  if (props.autoplayVideo) {
    const currentItem = props.list[index]
    if (isDef(currentItem) && isVideo(currentItem)) {
      const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
      video.play()
    }
  }
}

/**
 * 停止播放指定视频
 * @param index
 */
function handleStopVideoPaly(index: number) {
  if (props.stopPreviousVideo) {
    const previousItem = props.list[index]
    if (isDef(previousItem) && isVideo(previousItem)) {
      const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
      video.pause()
    }
  } else if (props.stopAutoplayWhenVideoPlay) {
    handleVideoPause()
  }
}

/**
 * 滑块动画结束
 */
function handleAnimationfinish(e: { detail: { current: any; source: string } }) {
  const { current, source } = e.detail
  if (current !== currentValue.value) {
    const forceUpdate = source === 'autoplay' || source === 'touch'
    updateCurrent(current, forceUpdate)
  }
  /**
   * 滑块动画结束时触发
   */
  emit('animationfinish', { current, source })
}

/**
 * 点击滑块事件
 * @param index 点击的滑块下标
 * @param item 点击的滑块内容
 */
function handleClick(index: number, item: string | SwiperList) {
  emit('click', { index, item })
}

function handleIndicatorChange({ dir }: { dir: 'prev' | 'next' }) {
  const { list, loop } = props
  const total = list.length
  let nextPos = dir === 'next' ? currentValue.value + 1 : currentValue.value - 1
  if (loop) {
    nextPos = dir === 'next' ? (currentValue.value + 1) % total : (currentValue.value - 1 + total) % total
  } else {
    nextPos = nextPos < 0 || nextPos >= total ? currentValue.value : nextPos
  }
  if (nextPos === currentValue.value) return
  navTo(nextPos)
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>