微信小程序轮播图自适应实现

1、打开小程序开发工具，在项目pages下新建mypage文件夹，在文件夹内新建page，名为mypage，并在app.json中将mypage设为第一页面

3、在mypage.js添加代码，给图片列表赋值，注意要拷贝三张图到mypage文件夹Page({data: {imgUrls: ['s1.jpg','s2.jpg','s3.jpg'],},})

5、修改mypage.wxml代码如下，动态设置swiper组件的高度：<swiper class = "sw" style = "height:{{imgheights[current]}}px" autoplay="true" interval="5000" duration="1000" circular="true" bindchange='bindchange'><block wx:for="{{imgUrls}}" wx:key="{{index}}"><swiper-item><image src="{{item}}" data-id ="{{index}}"mode="widthFix" bindload="imgload"/></swiper-item></block></swiper>mypage.wxss代码如下:.sw{width: 100%;}image{width: 100%;}

7、编译代码，更改模拟器大尺寸，依然可以自适应了,不过原来这个swiper的设计宽高固定的确实很麻烦