XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改预览图片预加载数量

Browse Source
This commit is contained in:
A1300399510
2024-08-26 11:09:15 +08:00
parent 8e2fe4383b
commit 3582fcfdef
9 changed files with 37 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/detail/imageWatch.vue
View File

@@ -1,27 +1,22 @@
<template>
<div class="watch-box" v-show="show">
<div class="pos-r dis-f al-item jus-x mg-t-60">
<div class="carousel-w">
<el-carousel arrow="never" height="600px" :autoplay="false" :initial-index="props.index"
indicator-position="none" ref="carousel" @change="carouselChange">
<el-carousel arrow="never" height="600px" :autoplay="false" :initial-index="props.index" indicator-position="none" ref="carousel" @change="carouselChange">
<el-carousel-item v-for="(item, i) in list" :key="i">
<div class="dis-f jus-x al-item" v-if="item">
<div class="img-box dis-f jus-x" v-if="item['type'] != 'attachment'">
<video :autoplay="false" controls :src="item.url || item['videourl']" :preload="imageTab == i ? 'metadata' : 'none'"
style="width:800px;"></video>
<video v-if="i >= imageTab - 1 && i <= imageTab + 1" :autoplay="false" controls :src="item.url || item['videourl']" :preload="imageTab == i ? 'metadata' : 'none'" style="width: 800px;"></video>
</div>
<div class="img-box dis-f jus-x" v-else>
<!-- <img v-lazy="item && item.url || item['imageurl'] || item['image']" class="img" alt=""> -->
<img :src="item && item.url || item['imageurl'] || item['image']" class="img" alt="">
<img v-if="i >= imageTab - 1 && i <= imageTab + 1" :src="(item && item.url) || item['imageurl'] || item['image']" class="img" alt="" />
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon left-arrow" @click="prev" alt="">
<img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon right-arrow" @click="next" alt="">
<img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon left-arrow" @click="prev" alt="" />
<img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon right-arrow" @click="next" alt="" />
</div>
<div class="tab-text">{{ `${imageTab + 1}/${list.length}` }}</div>
<div class="dis-f jus-x al-item">
@@ -29,22 +24,21 @@
<div v-for="(item, i) in list" :key="i" @click="watchSet(i)" class="pos-r" style="margin-bottom: 10px;">
<div class="voide" :class="{ 'select-box': imageTab === i }" v-if="item['type'] != 'attachment'">
<div class="icon-box dis-f jus-x al-item" :class="{ 'bor-r-8': imageTab === i }">
<img src="../../assets/img/detail/videoStop.svg" class="icon" alt="">
<img src="../../assets/img/detail/videoStop.svg" class="icon" alt="" />
</div>
</div>
<div class="img-box-s dis-f jus-x"
:class="[{ 'select-box': imageTab === i && item.thumbnail }, { 'voide-img': !item.thumbnail }]">
<img v-lazy="item.thumbnail || item.image" alt="" class="img-s" style="object-fit: cover;">
<div class="img-box-s dis-f jus-x" :class="[{ 'select-box': imageTab === i && item.thumbnail }, { 'voide-img': !item.thumbnail }]">
<img v-lazy="item.thumbnail || item.image" alt="" class="img-s" style="object-fit: cover;" />
</div>
</div>
</div>
</div>
<img src="../../assets/img/detail/imageClose.svg" @click="close" class="close-img" alt="">
<img src="../../assets/img/detail/imageClose.svg" @click="close" class="close-img" alt="" />
</div>
</template>
<script setup>
import { reactive, onMounted, ref, defineProps, watchEffect, watch } from 'vue'
import { reactive, onMounted, ref, defineProps, watchEffect, watch } from "vue"
// type 的类型代表 attachment 图片 videos 视频 lives 直播
const props = defineProps({
//url:展示图 thumbnail:缩略图
@@ -53,21 +47,21 @@ const props = defineProps({
type: Array,
default: function () {
return []
}
},
},
index: {
type: Number,
default: function () {
return 0
}
},
},
close: {
type: Function
type: Function,
},
show: {
type: Boolean,
default: false
}
default: false,
},
})
let show = props.show
@@ -77,22 +71,23 @@ let close = props.close
let carousel = ref(null)
let imageTab = ref(0)
//上一张
let prev = () => carousel.value.prev()
// 轮播图滚动后事件
const carouselChange = value =>{ imageTab.value = value}
const carouselChange = value => {
console.log("value")
imageTab.value = value
}
//下一张
let next = () => carousel.value.next()
//点击预览图
let watchSet = (num) => {
let watchSet = num => {
carousel.value.setActiveItem(num)
}
onMounted(() => {
watchEffect(() => {
show = props.show
@@ -101,11 +96,13 @@ onMounted(() => {
})
})
watch(() => props.index, (newValue, oldValue) => {
imageTab.value = newValue;
watchSet(imageTab.value)
});
watch(
() => props.index,
(newValue, oldValue) => {
imageTab.value = newValue
watchSet(imageTab.value)
}
)
</script>
<style scoped lang="less">
img {
@@ -190,11 +187,11 @@ img {
z-index: 1003;
.tab-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
text-align: center;
padding: 20px 0;
}
@@ -276,4 +273,4 @@ img {
::-webkit-scrollbar {
display: none;
}
</style>
</style>