微信小程序轮播设计图（微信小程序Swiper组件）

微信小程序轮播设计图（微信小程序Swiper组件）

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

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

首先是index.wxml代码块: <swiper class="banner" indicator-dots="{{indicatorDots}}" autoplay="true" interval="3000" duration="500" indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" style='height:{{Height}}'> <block wx:for="{{imgUrls}}" wx:for-index="index" wx:key="index"> <swiper-item class="headerImg"> <image bindtap="onProductsItemTap" data-item='{{item}}' src="https://img.aigexing.com{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight'></image> </swiper-item> </block> </swiper> 再就是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: "" imgUrls: [ '../../images/1.png' '../../images/2.png' '../../images/1.png' ] indicatorDots: true autoplay: true interval: 5000 duration: 1300 } //微信小程序轮播组件图片自适应方法 imgHeight: function(e) { var that = this var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度 var imgh = e.detail.height; //图片高度 var imgw = e.detail.width; //图片宽度 var swiperH = winWid * imgh / imgw "px" //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度 that.setData({ Height: swiperH //设置高度 }) } onLoad: function(options) { } })