个人详情页-图片展示组件优化
This commit is contained in:
@@ -177,29 +177,31 @@
|
||||
</div>
|
||||
<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=""
|
||||
@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 left-icon" alt=""
|
||||
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=""
|
||||
@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=""
|
||||
style="transform: rotate(180deg);" @click.stop="moveImageList('right')"
|
||||
v-show="imgList.length - 1 === imgListTab && imageLIst[imageLIst.length - 1] > 800">
|
||||
style="transform: rotate(180deg);" v-show="
|
||||
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 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="icon-box dis-f jus-x al-item">
|
||||
<img src="../assets/img/detail/videoStop.svg" class="icon" alt="">
|
||||
</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="">
|
||||
</div>
|
||||
<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="">
|
||||
</div>
|
||||
</div>
|
||||
@@ -802,11 +804,12 @@
|
||||
<!-- class='s-w-100' -->
|
||||
<div class="s-w-100">
|
||||
<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 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"
|
||||
v-if="concatData.data && concatData.data.wechat && concatData.data.count >= 2">
|
||||
<div class="dis-f al-item">
|
||||
@@ -824,8 +827,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mg-b-30"
|
||||
v-if="concatData.data && concatData.data.count >= 2">
|
||||
<div class="mg-b-30" v-if="concatData.data && concatData.data.count >= 2">
|
||||
<div class="dis-f al-item">
|
||||
<img src="../assets/img/detail/WhatsAppIcon.png" class="whatsapp-icon"
|
||||
alt="">
|
||||
@@ -877,7 +879,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<div class="deepen dis-f jus-x al-item">
|
||||
<div class="center-box dis-f jus-x al-item">
|
||||
@@ -891,7 +893,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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 v-if="concatData.data.whatsapp">
|
||||
@@ -1078,41 +1080,52 @@ let imageList = ref(null)
|
||||
let imgList = ref([])
|
||||
|
||||
//图片距离
|
||||
let imageLIst = ref([])
|
||||
let imageLIstLeft = ref([])
|
||||
|
||||
let imgListTab = ref(0)
|
||||
//计时器
|
||||
let interval = ''
|
||||
let clientWidth = ref(null)
|
||||
let scrollWidth = ref(null)
|
||||
//点击方向按钮
|
||||
let moveImageList = (type) => {
|
||||
let clientWidth = imageList.value.clientWidth
|
||||
let scrollWidth = imageList.value.scrollWidth
|
||||
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
|
||||
if (type === 'right' && imgScrollBottom()) return
|
||||
if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIstLeft.value.length - 1 && type === 'right')) return
|
||||
type === 'left' ? imgListTab.value-- : imgListTab.value++
|
||||
setOffsetWidth(imageLIst.value[imgListTab.value], type)
|
||||
setOffsetWidth(imageLIstLeft.value[imgListTab.value], type)
|
||||
}
|
||||
//设置滚动
|
||||
let setOffsetWidth = (num, type) => {
|
||||
let scroll = 0
|
||||
let clientWidth = imageList.value.clientWidth
|
||||
let scrollWidth = imageList.value.scrollWidth
|
||||
interval = setInterval(() => {
|
||||
if (!imageList.value) {
|
||||
clearInterval(interval)
|
||||
return
|
||||
}
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//判断是否触底
|
||||
let imgScrollBottom = () => {
|
||||
let clientWidth = imageList.value.clientWidth
|
||||
let scrollWidth = imageList.value.scrollWidth
|
||||
return imageLIstLeft.value[imgListTab.value] + clientWidth >= scrollWidth
|
||||
}
|
||||
|
||||
let imgData = ref(null)
|
||||
//获取图片宽度
|
||||
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 {
|
||||
justify-content: center;
|
||||
}
|
||||
.jus-sp{
|
||||
|
||||
.jus-sp {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@@ -1674,8 +1688,8 @@ img {
|
||||
letter-spacing: normal;
|
||||
color: #333333;
|
||||
|
||||
.mg-l-80{
|
||||
margin-left:80px;
|
||||
.mg-l-80 {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.round {
|
||||
@@ -1776,8 +1790,8 @@ img {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.mg-b-50{
|
||||
margin-bottom:50px;
|
||||
.mg-b-50 {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.mg-b-30 {
|
||||
@@ -1793,7 +1807,7 @@ img {
|
||||
margin-top: 20px;
|
||||
|
||||
.num-text {
|
||||
width:180px;
|
||||
width: 180px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user