今天把我小程序项目中的轮播图优化了一下，主要是优化轮播的图片自适应，但是的后台服务端上传轮播图片时，也要注意下图片的尺寸，不能相关太大，比如，本小程序用的是16：9图片宽高比，如果你不会做图，可以去找长方形的图，而不能去找4：3图片宽高比的图，这图虽然可以自适应到swiper轮播组件上，但是由于轮播图限制了16：9的宽高比尺寸，那么这张图就会左右留白。给人感觉不美观，下面就具体来看，是怎样的实现的。先上一张效果图，以微信小程序开发者工具模拟器上iphone机型从左到右，依次是iphone5-7的截图。
iphone5-7截图
1、Wxml部份
Swiper轮播图主体部份
Wxml代码很简单，这段代码采用微信小程序的template模板技术封装，可以让wxml代码变简洁，具体实现，请阅读《微信小程序template模板化技术的使用》基本上就是用的ColorUI轮播中的代码，复制过就可以用，需要注意的是，轮播图上的宽和高数值，是动态变化的，用了两个变量{{imagewidth}},{{imageheight}}，然后绑定了一个事件，imageLoad.
2、Js部份
首先要在page.js data中，写入两个变更，并给初始数值0，imagewidth: 0, imageheight: 0, 用来记录图片缩放后的宽和高，
获取图片原始宽度和高度，及手机屏幕宽高
将imageutil中图片缩放后的宽高，赋值给变量imagewidth.imageheight
在以上两段js代码中，首先通过，imageutil方法来获取图片原始的宽度和高度，进行缩放，然后将缩放后的图片宽高，赋值给，第1步上，data中的两个变量，imagewidth,imageheight，最后由swiper接收，并显示图片缩放后的效果。
至此，微信小程序轮播图，图片自适应显示就完成了
网友评论