一、wxml文件`
<swiper autoplay="true" indicator-dots="true" >
<swiper-item wx:for="{{movies}}">
<image style="width:{{imagewidth}}px ;height:{{imageheight}}px"
src="{{item.url}}" bindload="imageLoad"></image>
</swiper-item>
</swiper>
解释:
swiper:滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
详细属性可以进入微信开发文档官网
二、js文件
data:{
movies: [
{ url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=186844728,1327136957&fm=26&gp=0.jpg' },
{ url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2962521156,2821584462&fm=26&gp=0.jpg' },
{ url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3354585946,2561969542&fm=26&gp=0.jpg' }
]
},
imageUtil: function (e) {
var imageSize = {};
var originalWidth = e.detail.width; //图片原始宽
var originalHeight = e.detail.height; //图片原始高
//图片高宽比
var originalScale = originalHeight / originalWidth;
//获取屏幕宽高
wx.getSystemInfo({
success: function (res) {
var windowWidth = res.windowWidth;
var windowHeight = res.windowHeight;
//屏幕高宽比
var windowscale = windowHeight / windowWidth;
if (originalScale < windowscale) { //图片高宽比小于屏幕高宽比
//图片放缩后的宽度为屏幕宽
imageSize.imageWidth = windowWidth;
imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;
}
else {
imageSize.imageHeight = windowHeight;
imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
}
}
})
return imageSize;
},
imageLoad: function(e){
var imageSize = this.imageUtil(e);
this.setData({
imagewidth: imageSize.imageWidth,
imageheight: imageSize.imageHeight
})
},
解释:movies是一个数组,存放着轮播图的网络地址,下面两个是实现自适应功能的函数。
三、效果
iPhone XR
iPhone5
(参考资料微信开发者文档)