1. 程式人生 > >小程式學習之輪播圖顯示不全問題

小程式學習之輪播圖顯示不全問題

直接上程式碼

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的高度