vant-swipe adaptive picture height + picture preview

vant-swipe adaptive image height + image preview

 1.vant-swipe adaptive image height

When the image heights of the carousel images are not the same, if the height is not set, van-swipe-item will take the height of the highest image as the height. If the height of other images is lower than this height, the bottom will be blank, affecting thebeautiful

Solution: Use the height (slider height) and change event of Swipe Props to re-acquire the image height and assign it to the slider height every time the image is switched.

//Getasync mounted(){let res= await this.getImgSize(this.imgs[0])this.height=res.height/(res.width/375)},methods:{// Get the image size from the url of the imagegetImgSize(url) {return new Promise((resolve, reject) => {let img = new Image()img.src = urlimg.onload = () => {resolve({width: img.width,height: img.height})}})}//swipe switch listener eventasync onChange(index) {let res= await this.getImgSize(this.imgs[index])// Image fixed width 100vwthis.height=res.height/(res.width/375)},}

---

2. Image preview

Using vant's ImagePreview function, you need to use swipe's autoplay. When autoplay=0, stop playing; when the picture enters the preview, turn off autoplay, and when the preview ends, jump to the corresponding picture (you need to temporarily close the carouselanimation, otherwise it will flash by), start playing automatically

 //PreviewshowImage(i){// Preview turns off carousel scrollingthis.autoplay=0ImagePreview({images: this.imgs,// starting image positionstartPosition: i,overlayStyle:{background: '#000'},//When the preview image is closed - the image is the starting image of the carousel imageonClose:res=> {//The method of carousel image, jump to the corresponding imagethis.$refs.vantSwiper.swipeTo(res.index,{immediate:true //Turn off the carousel switching effect})this.autoplay=2000},});},

---

3. All codes