@ -6,13 +6,14 @@
@@ -6,13 +6,14 @@
@ touchstart . passive = "touchStart"
@ touchmove = "touchMove"
@ touchend = "touchEnd" >
< div class = "img-slide-item" v-for ="img in item.imgs" >
< div class = "img-slide-item" v-for ="( img,index) in item.imgs" >
< img :ref ="e=>setItemRef(e,'itemRefs')"
: src = "img" >
: src = "img+'&d='+index " >
< / div >
< / div >
< / div >
< Icon icon = "fluent:play-28-filled" class = "pause-icon" v -if = " state.status = = = SlideItemPlayStatus.Pause " / >
< Icon icon = "fluent:play-28-filled" class = "pause-icon"
v - if = "state.status === SlideItemPlayStatus.Pause && state.operationStatus === SlideAlbumOperationStatus.Normal" / >
< template v-if ="state.operationStatus === SlideAlbumOperationStatus.Normal" >
< ItemToolbar
@ -43,10 +44,11 @@
@@ -43,10 +44,11 @@
< Teleport to = "#home-index" v-if ="state.isPreview" >
< div class = "preview" >
< div class = "preview-wrapper" >
< img :src ="img"
: class = "{'preview-img':index === state.localIndex}"
v - for = "(img,index) in props.item.imgs"
: ref = "e=>setItemRef(e,'previewImgs')"
< img
: src = "img+'&d='+index"
: class = "{'preview-img':index === state.localIndex}"
v - for = "(img,index) in props.item.imgs"
: ref = "e=>setItemRef(e,'previewImgs')"
>
< / div >
< div class = "indicator" >
@ -69,7 +71,7 @@
@@ -69,7 +71,7 @@
v - else
class = "pause"
@ click = "stopPlay" / >
< Icon icon = "system-uicons:push-down" @click ="Utils. $no" / >
< Icon icon = "system-uicons:push-down" @click ="$notice('已保存到系统相册') " / >
< / div >
< / div >
< / Teleport >
@ -78,7 +80,7 @@
@@ -78,7 +80,7 @@
< script setup lang = "jsx" >
import enums from "../../utils/enums" ;
import Utils from '../../utils'
import Utils , { $no , $notice } from '../../utils'
import { mat4 } from 'gl-matrix'
import { Icon } from "@iconify/vue" ;
import { onMounted , onBeforeUpdate , reactive , ref , watch , computed , provide , nextTick , onUnmounted } from "vue" ;
@ -281,12 +283,13 @@ function startLoop() {
@@ -281,12 +283,13 @@ function startLoop() {
if ( state . cycleFn !== - 1 ) return
if ( ! state . isAutoPlay ) return
state . cycleFn = setInterval ( ( ) => {
state . status = SlideItemPlayStatus . Play
if ( state . localIndex < props . item . imgs . length - 1 ) {
state . localIndex ++
} else {
state . localIndex = 0
}
} , 15 00)
} , 20 00)
}
onMounted ( async ( ) => {
@ -296,7 +299,6 @@ onMounted(async () => {
@@ -296,7 +299,6 @@ onMounted(async () => {
/ / s e t T i m e o u t ( ( ) = > {
/ / s t a t e . o p e r a t i o n S t a t u s = S l i d e A l b u m O p e r a t i o n S t a t u s . Z o o m i n g
/ / } , 1 0 0 0 )
bus . on ( EVENT _KEY . SINGLE _CLICK _BROADCAST , click )
} )
@ -319,13 +321,13 @@ function click({uniqueId, index, type}) {
@@ -319,13 +321,13 @@ function click({uniqueId, index, type}) {
stopPlay ( )
setTimeout ( ( ) => {
state . localIndex = 0
state . status = SlideItemPlayStatus . Play
state . operationStatus = SlideAlbumOperationStatus . Normal
} , 500 )
}
if ( type === EVENT _KEY . ITEM _PLAY ) {
state . localIndex = 0
state . isAutoPlay = true
state . status = SlideItemPlayStatus . Play
startLoop ( )
startPlay ( )
}
}
}
@ -395,22 +397,21 @@ function touchStart(e) {
@@ -395,22 +397,21 @@ function touchStart(e) {
if ( e . touches . length === 1 ) {
slideTouchStart ( e , wrapperEl . value , state )
} else {
state . last . point2 = state . start . point2 = { x : e . touches [ 1 ] . pageX , y : e . touches [ 1 ] . pageY } ;
if ( state . operationStatus === SlideAlbumOperationStatus . Zooming ) {
state . start . center = Utils . getCenter ( state . start . point1 , state . start . point2 )
/ / s t a t e . s t a r t . c e n t e r = U t i l s . g e t C e n t e r ( s t a t e . s t a r t . p o i n t 1 , s t a t e . s t a r t . p o i n t 2 )
return
}
state . operationStatus = SlideAlbumOperationStatus . Zooming
state . itemRefs [ state . localIndex ] . style [ 'transition-duration' ] = '0ms' ;
state . last . point1 = state . start . point1 = { x : e . touches [ 0 ] . pageX , y : e . touches [ 0 ] . pageY } ;
/ / s t a t e . l a s t . p o i n t 2 = s t a t e . s t a r t . p o i n t 2 = { x : e . t o u c h e s [ 1 ] . p a g e X , y : e . t o u c h e s [ 1 ] . p a g e Y } ;
state . last . point2 = state . start . point2 = { x : e . touches [ 1 ] . pageX , y : e . touches [ 1 ] . pageY } ;
state . start . center = Utils . getCenter ( state . start . point1 , state . start . point2 )
}
}
function touchMove ( e ) {
/ / U t i l s . $ s h o w N o t i c e D i a l o g ( ' m o v e ' + e . t o u c h e s . l e n g t h )
console . log ( 'move' , e . touches . length , state . operationStatus )
/ / c o n s o l e . l o g ( ' m o v e ' , e . t o u c h e s . l e n g t h , s t a t e . o p e r a t i o n S t a t u s )
let current1 = { x : e . touches [ 0 ] . pageX , y : e . touches [ 0 ] . pageY }
stopLoop ( )
@ -433,12 +434,22 @@ function touchMove(e) {
@@ -433,12 +434,22 @@ function touchMove(e) {
state . isAutoPlay = false
slideTouchMove ( e , wrapperEl . value , state , judgeValue , canNext ,
( ) => {
/ / c o n s o l e . l o g ( ' m o v e - n e x t c b ' )
} , SlideType . HORIZONTAL ,
( ) => {
if ( state . operationStatus = ==SlideAlbumOperationStatus . Detai l) {
if ( state . operationStatus ! ==SlideAlbumOperationStatus . Norma l) {
Utils . $stopPropagation ( e )
}
} )
/ / c o n s o l e . l o g ( ' m o v e - n o t N e x t c b ' )
/ / s t a t e . o p e r a t i o n S t a t u s = S l i d e A l b u m O p e r a t i o n S t a t u s . N o r m a l
} ,
( ) => {
if ( state . operationStatus !== SlideAlbumOperationStatus . Normal ) {
Utils . $stopPropagation ( e )
}
}
)
}
} else {
/ / c o n s o l e . l o g ( ' m 3 ' )
@ -503,8 +514,10 @@ function touchMove(e) {
@@ -503,8 +514,10 @@ function touchMove(e) {
}
function touchEnd ( e ) {
console . log ( 'Date.now() - lockDatetime' , Date . now ( ) - lockDatetime , )
if ( Date . now ( ) - lockDatetime < 300 && state . move . x === 0 && state . move . y === 0 ) {
/ / c o n s o l e . l o g ( ' D a t e . n o w ( ) - l o c k D a t e t i m e ' , D a t e . n o w ( ) - l o c k D a t e t i m e , )
if ( Date . now ( ) - lockDatetime < 300
&& state . move . x === 0 && state . move . y === 0
&& state . operationStatus !== SlideAlbumOperationStatus . Zooming ) {
if ( state . status === SlideItemPlayStatus . Play ) {
stopPlay ( )
} else {
@ -516,7 +529,7 @@ function touchEnd(e) {
@@ -516,7 +529,7 @@ function touchEnd(e) {
state . isPreview = false
/ / 这 里 ， 如 果 是 双 指 触 控 的 话 ， 会 触 发 两 次 事 件 ， 第 一 次 t o u c h e s 长 度 为 1 ， 第 二 次 为 0
/ / 如 果 是 单 指 触 控 的 话 ， 触 发 一 次 事 件 ， t o u c h e s 长 度 为 0
console . log ( 'end' , e . touches . length )
console . log ( 'end' , e . touches . length , state . operationStatus )
/ / e . t o u c h e s . l e n g t h = = = 1 说 明 ， 松 开 了 第 一 只 手 指
if ( e . touches . length === 1 ) {
@ -540,6 +553,9 @@ function touchEnd(e) {
@@ -540,6 +553,9 @@ function touchEnd(e) {
console . log ( 'nextCb' )
} ,
( ) => {
if ( state . operationStatus !== SlideAlbumOperationStatus . Normal ) {
state . operationStatus = SlideAlbumOperationStatus . Normal
}
console . log ( 'doNotNextCb' )
startLoop ( )
}
@ -559,9 +575,6 @@ function setItemRef(el, key) {
@@ -559,9 +575,6 @@ function setItemRef(el, key) {
function canNext ( isNext , e ) {
let res = ! ( ( state . localIndex === 0 && ! isNext ) || ( state . localIndex === props . item . imgs . length - 1 && isNext ) ) ;
if ( ! res && state . operationStatus === SlideAlbumOperationStatus . Detail && e ) {
Utils . $stopPropagation ( e )
}
return res
}
@ -626,7 +639,7 @@ function canNext(isNext, e) {
@@ -626,7 +639,7 @@ function canNext(isNext, e) {
flex : 1 ;
margin : 0 2 rem ;
height : @ h ;
background : rgba ( # 000 , .5 ) ;
background : # 75757580 ;
position : relative ;
overflow : hidden ;
@ -635,7 +648,7 @@ function canNext(isNext, e) {
@@ -635,7 +648,7 @@ function canNext(isNext, e) {
position : absolute ;
left : 0 ;
height : @ h ;
background : white ;
background : # e5e5e587 ;
}
}
}
@ -657,16 +670,17 @@ function canNext(isNext, e) {
@@ -657,16 +670,17 @@ function canNext(isNext, e) {
. preview - wrapper {
img {
transition : width .3 s ;
transition : all .3 s ;
margin : 0 5 rem ;
width : 30 rem ;
height : 50 rem ;
height : 4 5rem ;
background - color : black ;
border - radius : 3 rem ;
overflow : hidden ;
object - fit : cover ;
& . preview - img {
margin : 0 15 rem ;
width : 40 rem ;
}
}
zyronon
2 years ago