更新：登录功能
This commit is contained in:
318
uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue
Normal file
318
uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<view :class="`wd-swiper ${customClass}`" :style="customStyle">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<scroll-view scroll-x scroll-y style="width: 100%; height: 100%">
|
||||
<!-- #endif -->
|
||||
<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="swiperItemClass">
|
||||
<slot :item="item" :index="index">
|
||||
<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>
|
||||
</slot>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
</scroll-view>
|
||||
<!-- #endif -->
|
||||
|
||||
<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, useSlots } 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 slots = useSlots()
|
||||
|
||||
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 swiperItemClass = computed(() => {
|
||||
return `wd-swiper__item ${slots.default ? 'wd-swiper__item--slot' : ''}`
|
||||
})
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user