小程式學習之輪播圖顯示不全問題
阿新 • • 發佈:2019-01-04
直接上程式碼
index.js
//index.js
Page({
data: {
background: ["http://59.151.121.92:8001/hx-manager/file/banner/x6lEL28CRV7AMFZ0zP5N81280P1035.jpg", "http://59.151.121.92:8001/hx-manager/file/banner/ng6i41IT167p314hd9f28536LScLB2.jpg", "http://59.151.121.92:8001/hx-manager/file/banner/636596Sf8eO65nzewE8nqwVxkYV8ZN.jpg"],
indicatorDots: true ,
vertical: false,
autoplay: false,
interval: 3000,
duration: 1200,
},
onLoad: function () {
this.setData({
autoplay: !this.data.autoplay
})
}
})
index.wxml
<!--index.wxml-->
<view class="page">
<view>
<swiper class="swiper_box" indicator-dots ="{{indicatorDots}}" autoplay="{{autoplay}}">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<image src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
</view>
</view>
index.wxss
/**index.wxss**/
.swiper-item {
width: 100%;
display: block;
height: 150px;
}
.swiper_box {
height: 400rpx;
width: 100%;
}
swiper-item image {
height: 100%;
width: 100%;
display: inline-block;
overflow: hidden;
}
關鍵在這 height: 400rpx; 直接覆蓋swiper的高度