swiper轮播图_微信小程序Swiper组件，根据手机屏幕大小，轮播图片自适应

在继续开发微信小程序之前,我去微信上搜索一下,相关的小程序,看它们的页面排版,配色,以及用到的各项功能,发现,其本都会用到微信小程序的swiper轮播组件,也就是一个可以左右滑动的轮播图.

找到小程序开发文档中关于swiper的介绍,拷贝相应的代码,然后,放几张本地已裁剪好的图片,让轮播组件先动起来,到这时就应该想到,手机屏幕有大有小,就要考虑手机屏幕适配的问题,话不多说下面,我就贴出具体实现代码.大家将以下代码复制到自己的微信小程序项目中,即可实现轮播图片自适应的效果 ,在复制js代码时,请大家,比照来复制来粘贴,以免覆盖自己原来已写好的代码.本文已匹配小视频动态演示,地址在文章的扩展链接里面.如有疑问,请在评论区留言,谢谢!

首先是index.wxml代码块: 再就是index.wxss模块:/*轮播组件样式*/.banner { width: 100%; height: auto; display: block; line-height: 50rpx;/* 可以改变swiper上小圆点的位置 */ position: relative;}.slide-image { width: 100%; display: block;} 最后是index.js模块:Page({ data: { Height: