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

来源：互联网发布：怎么做淘宝达人编辑：程序博客网时间：2024/05/17 23:52

直接上代码

index.js

//index.jsPage({  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的高度

0 0