【微信小程序】在手机上显示,多个数组循环。第二个数组的图片高度不同于第一个数组的图片高度


{
    "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;
              // 动态设置swiperHeight数组的值
              this.$set(this.swiperHeight, i, height);
              // console.log(JSON.stringify(this.swiperHeight))
              // wx.showModal({content: i + "_" +inx+"_" +JSON.stringify(this.swiperHeight)})
            }
          }).exec();
        },300)
      }
}

你可能感兴趣的:(微信小程序,小程序)