Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to achieve a high degree of self-adaptation of swiper by WeChat Mini Programs". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how WeChat Mini Programs can achieve a high degree of self-adaptation in swiper.

Requirement: swiper highly adaptive

Wxml

Wxss

.swiper image {width: 100%; height: auto;}

Wxjs

Data: {/ / Image address imgList: ['/ images/wyh-img_bg.png','/ images/wyh-img8.png','/ images/wyh-img_shop1.png','/ images/wyh-img_bg1.png'], / / whether to use cohesion slide circular: true, / / whether to display the artboard indicator point indicatorDots: false, / / the color of the selected point indicatorcolor: "# 000" / / whether to vertical vertical: false, / / whether to automatically switch autoplay: true, / / automatic switching interval interval: 2500, / / sliding animation duration millisecond duration: 100, / / height of all images (must) imgheights: [], / / picture width imgwidth: 750, / / default (must) current: 0} ImageLoad: function (e) {/ / get the true width of the picture var imgwidth = e.detail.width, imgheight = e.detail.height, / / aspect ratio ratio = imgwidth / imgheight Console.log (imgwidth, imgheight) / / calculated height value var viewHeight = 750,750 / ratio; var imgheight = viewHeight; var imgheights = this.data.imgheights; / / record the corresponding height of each picture in the array imgheights [e.target.dataset.id] = imgheight This.setData ({imgheights: imgheights})}, bindchange: function (e) {/ / console.log (e.detail.current) this.setData ({current: e.detail.current})}, I believe you have a deeper understanding of "how WeChat Mini Programs achieves high swiper adaptation". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.