{
"status":200,
"message":"",
"total":1,
"result":{
"id":141,
"createTime":"2023-07-11 09:47:41",
"updateTime":"2023-07-12 10:03:38",
"configId":1,
"clubId":null,
"cmsType":1,
"title":"测试多图横滑",
"type":null,
"url":"2023/07/11/1689040336880.jpg",
"author":"admin",
"lastEditor":"admin",
"sort":1,
"status":1,
"buttonName":"",
"jumpType":1,
"jumpParam":"",
"jumpParamId":null,
"displayStartDate":null,
"displayEndDate":null,
"floatButton":false,
"coverUrl":null,
"cmsList":[
{
"cmsId":141,
"configId":null,
"contentType":4,
"content":"",
"contentUrl":"",
"mulitImgUrl":[
{
"url":"2023/07/11/1689056129067.jpg"
},
{
"url":"2023/07/11/1689056133486.jpg"
}
],
"contentMp4":"",
"jumpType":3,
"jumpParam":"白玉",
"jumpParamId":20,
"jumpParamSortId":null,
"contentSort":1,
"author":null,
"lastEditor":"admin",
"contentStatus":1
},
{
"cmsId":141,
"configId":null,
"contentType":1,
"content":"2222222222222",
"contentUrl":"",
"mulitImgUrl":[
{
"url":""
}
],
"contentMp4":"",
"jumpType":1,
"jumpParam":"",
"jumpParamId":null,
"jumpParamSortId":null,
"contentSort":1,
"author":"admin",
"lastEditor":"admin",
"contentStatus":1
},
{
"cmsId":141,
"configId":null,
"contentType":3,
"content":"",
"contentUrl":"2023/07/11/1689060393602.jpg",
"mulitImgUrl":[
{
"url":""
}
],
"contentMp4":"",
"jumpType":1,
"jumpParam":"",
"jumpParamId":null,
"jumpParamSortId":null,
"contentSort":1,
"author":"admin",
"lastEditor":"admin",
"contentStatus":1
},
{
"cmsId":141,
"configId":null,
"contentType":4,
"content":"",
"contentUrl":"",
"mulitImgUrl":[
{
"url":"2023/07/12/1689127232629.jpg"
},
{
"url":"2023/07/12/1689127236641.jpg"
}
],
"contentMp4":"",
"jumpType":1,
"jumpParam":"https://www.baidu.com/",
"jumpParamId":null,
"jumpParamSortId":null,
"contentSort":1,
"author":"admin",
"lastEditor":"admin",
"contentStatus":1
},
{
"cmsId":141,
"configId":null,
"contentType":2,
"content":"",
"contentUrl":"",
"mulitImgUrl":[
{
"url":""
}
],
"contentMp4":"2023/07/12/1689127414550.mp4",
"jumpType":1,
"jumpParam":"",
"jumpParamId":null,
"jumpParamSortId":null,
"contentSort":1,
"author":"admin",
"lastEditor":"admin",
"contentStatus":1
}
]
}
}
<view :class="{ 'content-body': item.contentType == '3' }" v-for="(item, i) in dataObj.cmsList" :key="i"
style="margin-top: -4px;" v-if="dataObj.cmsList && dataObj.cmsList.length != 0">
<swiper class="swiper" v-if="item.contentType == '4'" :indicator-dots="indicatorDots" :interval="interval"
:duration="duration" :style="{ height: swiperHeight + 'px' }">
<swiper-item class="swiper_item" v-for="(ite, inx) in item.mulitImgUrl" :key="inx">
<image @click="goBuy(item, '')" :src="$httpUrl + ite.url" mode="widthFix" class="weiper_item"
style="width:100%" @load="onImageLoad(inx)" :id="'myImage' + inx">
</image>
</swiper-item>
</swiper>
</view>
data() {
return {
swiperHeight: []
}
}
methods: {
onImageLoad(i, inx) {
if(inx !== 0 ) {
return
}
const query = wx.createSelectorQuery();
setTimeout(()=> {
query.select(`#myImage${i}${inx}`).boundingClientRect((res) => {
if (res) {
const height = res.height;
this.$set(this.swiperHeight, i, height);
}
}).exec();
},300)
}
}