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

个人详情页-图片展示组件优化

Browse Source
This commit is contained in:
luJianJun
2023-08-03 12:03:47 +08:00
parent 5e3946454b
commit 0d34bc674e
1 changed files with 46 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/views/detail.vue
View File

@@ -177,29 +177,31 @@
</div> </div>
<div class="img-list-box dis-f jus-x al-item" v-show="imgList.length > 0"> <div class="img-list-box dis-f jus-x al-item" v-show="imgList.length > 0">
<img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt="" <img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
@click.stop="moveImageList('left')" v-show="imgListTab === 0 && scrollWidth > clientWidth">
v-show="imgListTab === 0 && imageLIst[imageLIst.length - 1] > 800">
<img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt="" <img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
style="transform: rotate(180deg);" @click.stop="moveImageList('left')" style="transform: rotate(180deg);" @click.stop="moveImageList('left')"
v-show="imgListTab > 0 && imageLIst[imageLIst.length - 1] > 800"> v-show="imgListTab > 0 && scrollWidth > clientWidth">
<img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt="" <img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
@click.stop="moveImageList('right')" @click.stop="moveImageList('right')"
v-show="imgList.length - 1 !== imgListTab && imageLIst[imageLIst.length - 1] > 800"> v-show="imgList.length - 1 !== imgListTab &&
scrollWidth > clientWidth &&
imageLIstLeft[imgListTab] + clientWidth < scrollWidth">
<img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt="" <img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
style="transform: rotate(180deg);" @click.stop="moveImageList('right')" style="transform: rotate(180deg);" v-show="
v-show="imgList.length - 1 === imgListTab && imageLIst[imageLIst.length - 1] > 800"> scrollWidth > clientWidth &&
imageLIstLeft[imgListTab] + clientWidth >= scrollWidth">
<div class="dis-f al-item list-box s-w-100" ref="imageList" v-if="imgList.length > 0"> <div class="dis-f al-item list-box s-w-100" ref="imageList" v-if="imgList.length > 0">
<div v-for="(item, i) in imgList" :key="i" <div v-for="(item, i) in imgList" :key="i"
@click.stop="imageIndex = i, imageShow = true"> @click.stop="imageIndex = i, imageShow = true" ref="imgData">
<div class="video" v-if="item && !item.thumbnail"> <div class="video" v-if="item && !item.thumbnail">
<div class="icon-box dis-f jus-x al-item"> <div class="icon-box dis-f jus-x al-item">
<img src="../assets/img/detail/videoStop.svg" class="icon" alt=""> <img src="../assets/img/detail/videoStop.svg" class="icon" alt="">
</div> </div>
<img class="video" ref="imgData" :src="item.image" @load="setImageWidth(i)" <img class="video" :src="item.image" @load="setImageWidth(i)"
@error="setImageWidth(i)" alt=""> @error="setImageWidth(i)" alt="">
</div> </div>
<div class="img dis-f" v-if="item && item.thumbnail"> <div class="img dis-f" v-if="item && item.thumbnail">
<img class="img" style="margin:0;" ref="imgData" :src="item.thumbnail" <img class="img" style="margin:0;" :src="item.thumbnail"
@load="setImageWidth(i)" @error="setImageWidth(i)" alt=""> @load="setImageWidth(i)" @error="setImageWidth(i)" alt="">
</div> </div>
</div> </div>
@@ -802,11 +804,12 @@
<!-- class='s-w-100' --> <!-- class='s-w-100' -->
<div class="s-w-100"> <div class="s-w-100">
<div class="liner-title" <div class="liner-title"
:class="{'mg-b-50':concatData.data && concatData.data.count == 2&&concatData.data.wechatdata.url}"> :class="{ 'mg-b-50': concatData.data && concatData.data.count == 2 && concatData.data.wechatdata.url }">
联系方式 联系方式
</div> </div>
<div class="dis-f jus-bet s-w-100"> <div class="dis-f jus-bet s-w-100">
<div v-if="concatData.data && (concatData.data.count > 2||(!concatData.data.wechatdata.url&&concatData.data.count== 2))"> <div
v-if="concatData.data && (concatData.data.count > 2 || (!concatData.data.wechatdata.url && concatData.data.count == 2))">
<div class="mg-b-30" <div class="mg-b-30"
v-if="concatData.data && concatData.data.wechat && concatData.data.count >= 2"> v-if="concatData.data && concatData.data.wechat && concatData.data.count >= 2">
<div class="dis-f al-item"> <div class="dis-f al-item">
@@ -824,8 +827,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mg-b-30" <div class="mg-b-30" v-if="concatData.data && concatData.data.count >= 2">
v-if="concatData.data && concatData.data.count >= 2">
<div class="dis-f al-item"> <div class="dis-f al-item">
<img src="../assets/img/detail/WhatsAppIcon.png" class="whatsapp-icon" <img src="../assets/img/detail/WhatsAppIcon.png" class="whatsapp-icon"
alt=""> alt="">
@@ -877,7 +879,7 @@
</div> </div>
</div> </div>
<div class="round dis-f jus-x al-item" <div class="round dis-f jus-x al-item"
:class="{'mg-t-20':concatData.data && concatData.data.count > 2 && !concatData.data.wechatdata.url}" :class="{ 'mg-t-20': concatData.data && concatData.data.count > 2 && !concatData.data.wechatdata.url }"
v-if="concatData.data && concatData.data.count >= 2 && !concatData.data.wechatdata.url"> v-if="concatData.data && concatData.data.count >= 2 && !concatData.data.wechatdata.url">
<div class="deepen dis-f jus-x al-item"> <div class="deepen dis-f jus-x al-item">
<div class="center-box dis-f jus-x al-item"> <div class="center-box dis-f jus-x al-item">
@@ -891,7 +893,7 @@
</div> </div>
</div> </div>
<div class="dis-f al-item whatsapp-wx-box s-w-100 jus-sp" <div class="dis-f al-item whatsapp-wx-box s-w-100 jus-sp"
v-if="concatData.data && concatData.data.count === 2 && concatData.data.wechatdata.aid !== 0&&concatData.data.wechatdata.url"> v-if="concatData.data && concatData.data.count === 2 && concatData.data.wechatdata.aid !== 0 && concatData.data.wechatdata.url">
<div> <div>
<div> <div>
<div v-if="concatData.data.whatsapp"> <div v-if="concatData.data.whatsapp">
@@ -1078,41 +1080,52 @@ let imageList = ref(null)
let imgList = ref([]) let imgList = ref([])
//图片距离 //图片距离
let imageLIst = ref([]) let imageLIstLeft = ref([])
let imgListTab = ref(0) let imgListTab = ref(0)
//计时器 //计时器
let interval = '' let interval = ''
let clientWidth = ref(null)
let scrollWidth = ref(null)
//点击方向按钮 //点击方向按钮
let moveImageList = (type) => { let moveImageList = (type) => {
let clientWidth = imageList.value.clientWidth if (type === 'right' && imgScrollBottom()) return
let scrollWidth = imageList.value.scrollWidth if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIstLeft.value.length - 1 && type === 'right')) return
if (type === 'right' && imageLIst.value[imgListTab.value] + clientWidth >= scrollWidth) return
if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIst.value.length - 1 && type === 'right')) return
type === 'left' ? imgListTab.value-- : imgListTab.value++ type === 'left' ? imgListTab.value-- : imgListTab.value++
setOffsetWidth(imageLIst.value[imgListTab.value], type) setOffsetWidth(imageLIstLeft.value[imgListTab.value], type)
} }
//设置滚动 //设置滚动
let setOffsetWidth = (num, type) => { let setOffsetWidth = (num, type) => {
let scroll = 0 let scroll = 0
let clientWidth = imageList.value.clientWidth
let scrollWidth = imageList.value.scrollWidth
interval = setInterval(() => { interval = setInterval(() => {
if (!imageList.value) { if (!imageList.value) {
clearInterval(interval) clearInterval(interval)
return return
} }
scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10 scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10
if ((type === 'left' ? num >= scroll : num <= scroll) || scroll + clientWidth >= scrollWidth) { if ((type === 'left' ? num >= scroll : num <= scroll) || scroll + clientWidth.value >= scrollWidth.value) {
clearInterval(interval) clearInterval(interval)
} }
}) })
} }
//判断是否触底
let imgScrollBottom = () => {
let clientWidth = imageList.value.clientWidth
let scrollWidth = imageList.value.scrollWidth
return imageLIstLeft.value[imgListTab.value] + clientWidth >= scrollWidth
}
let imgData = ref(null) let imgData = ref(null)
//获取图片宽度 //获取图片宽度
let setImageWidth = (num) => { let setImageWidth = (num) => {
imageLIst.value[num] = imgData.value[num] && imgData.value[num].offsetLeft - 20 imageLIstLeft.value[num] = imgData.value[num] && imgData.value[num].offsetLeft - 20
console.log(imageLIstLeft.value)
if (imageLIstLeft.value.length === imgList.value.length) {
clientWidth.value = imageList.value.clientWidth
scrollWidth.value = imageList.value.scrollWidth
console.log(scrollWidth.value,clientWidth.value)
}
} }
//学校地址数据 //学校地址数据
@@ -1494,7 +1507,8 @@ img {
.jus-x { .jus-x {
justify-content: center; justify-content: center;
} }
.jus-sp{
.jus-sp {
justify-content: space-around; justify-content: space-around;
} }
@@ -1674,8 +1688,8 @@ img {
letter-spacing: normal; letter-spacing: normal;
color: #333333; color: #333333;
.mg-l-80{ .mg-l-80 {
margin-left:80px; margin-left: 80px;
} }
.round { .round {
@@ -1776,8 +1790,8 @@ img {
margin-bottom: 30px; margin-bottom: 30px;
} }
.mg-b-50{ .mg-b-50 {
margin-bottom:50px; margin-bottom: 50px;
} }
.mg-b-30 { .mg-b-30 {
@@ -1793,7 +1807,7 @@ img {
margin-top: 20px; margin-top: 20px;
.num-text { .num-text {
width:180px; width: 180px;
word-wrap: break-word; word-wrap: break-word;
} }
} }