MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save

Browse Source
This commit is contained in:
zyronon 2024-03-03 23:59:15 +08:00
parent 586ce9671f
commit d081d92965
1 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/slide/SlideAlbum.vue
View File

@ -6,7 +6,7 @@
@touchstart.passive="touchStart" @touchstart.passive="touchStart"
@touchmove="touchMove" @touchmove="touchMove"
@touchend="touchEnd"> @touchend="touchEnd">
<div class="img-slide-item" v-for="img in props.item.imgs"> <div class="img-slide-item" v-for="img in item.imgs">
<img :ref="e=>setItemRef(e,'itemRefs')" <img :ref="e=>setItemRef(e,'itemRefs')"
:src="img"> :src="img">
</div> </div>
@ -106,13 +106,13 @@ const props = defineProps({
return { return {
type: 'imgs', type: 'imgs',
imgs: [ imgs: [
new URL('../../assets/img/poster/6.jpg', import.meta.url).href,
new URL('../../assets/img/poster/0.jpg', import.meta.url).href, new URL('../../assets/img/poster/0.jpg', import.meta.url).href,
new URL('../../assets/img/poster/1.jpg', import.meta.url).href, new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
new URL('../../assets/img/poster/2.jpg', import.meta.url).href, new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
new URL('../../assets/img/poster/3.jpg', import.meta.url).href, new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
new URL('../../assets/img/poster/4.jpg', import.meta.url).href, new URL('../../assets/img/poster/4.jpg', import.meta.url).href,
new URL('../../assets/img/poster/5.jpg', import.meta.url).href, new URL('../../assets/img/poster/5.jpg', import.meta.url).href,
new URL('../../assets/img/poster/6.jpg', import.meta.url).href,
], ],
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b", "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
video: 'http://douyin.ttentau.top/0.mp4', video: 'http://douyin.ttentau.top/0.mp4',
@ -241,7 +241,7 @@ const state = reactive({
onMounted(async () => { onMounted(async () => {
await nextTick(); await nextTick();
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL) slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
state.cycleFn = () => { state.cycleFn = () => {
@ -457,8 +457,7 @@ function touchEnd(e) {
} }
function getProgressWidth(index) { function getProgressWidth(index) {
if (state.progress >= (index + 1) * 100) return {width: '100%'} return {width: `${(state.localIndex + 1 - index) * 100}%`}
return {width: `${state.progress - index * 100 < 0 ? 0 : state.progress - index * 100}%`}
} }
function setItemRef(el, key) { function setItemRef(el, key) {
@ -517,7 +516,7 @@ function canNext(isNext, e) {
.progress-bar { .progress-bar {
position: absolute; position: absolute;
width: 100%; width: 100%;
bottom: 0; bottom: 8rem;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
padding: 0 5rem; padding: 0 5rem;