小程序学习之轮播图显示不全问题

直接上代码

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