swiper轮播图
wxml
<view class="page-section page-section-spacing swiper">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{img}}" wx:key="*this" >
<swiper-item>
//这里放的是你要轮播的图片
<image src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
</view>
js
Page({
data: {
img: [
'../img/1.jpg',
'../img/3.jpg',
'../img/4.png'
],
indicatorDots: true,//是否显示圆点
vertical: false,//滑动方向是否为纵向
autoplay: true,//是否自动切换
interval: 2000,//自动切换时间间隔
duration: 500//滑动动画时长
},
})
具体效果是做好了,但是图片并没有自适应,现在就来看看图片怎么来自适用吧!
swiper轮播图自适应
wxml
//接上一个wxml文件
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='width:100%;height:{{heig}}'>//这里添加style样式
<block wx:for="{{img}}" wx:key="*this" >
<swiper-item>
<image src="{{item}}" mode='widthFix' bindload="imageLoad"></image>//这里再添加mode和imageLoad事件
</swiper-item>
</block>
</swiper>
js
//接上一个js文件
Page({
imageLoad: function (e) {
var winWid = wx.getSystemInfoSync().windowWidth; //获取屏幕宽度
var imgWid = e.detail.width; //图片高度
var imgHeg = e.detail.height; //图片高度
this.setData({
heig: winWid * imgHeg / imgWid + 'px'
})
},
data: {
img: [
'../img/1.jpg',
'../img/3.jpg',
'../img/4.png'
],
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 2000,
duration: 500
},
})
以上就是图片自适应咯
目录结构: