gter.net/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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/detail.63ec31c0.css → dist/css/detail.d8323237.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/housing.2e415d02.css → dist/css/housing.aa89614b.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@ -1,4 +1,4 @@
<!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"/><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.6d96b969.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.beeec79c.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.dafb6d11.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display: none;"><script src="//v1.cnzz.com/z_stat.php?id=1281224882&amp;web_id=1281224882"></script><script>var _hmt = _hmt || []
<!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"/><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.6d96b969.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.4ba9b1ca.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.dafb6d11.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display: none;"><script src="//v1.cnzz.com/z_stat.php?id=1281224882&amp;web_id=1281224882"></script><script>var _hmt = _hmt || []
;(function () {
var hm = document.createElement("script")
hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746"

1
dist/js/616.bba9f162.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/774.d78100a1.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/app.beeec79c.js → dist/js/app.4ba9b1ca.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/detail.b845f59d.js → dist/js/detail.05caa8d7.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/housing.123bd292.js → dist/js/housing.1926417e.js vendored
View File

File diff suppressed because one or more lines are too long

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>