微信小程序--swiper組件

<view class='swiper-container'>
<swiper indicator-dots="true"
  autoplay="true" interval="5000" vertical="{{false}}" class='swiper' class='aaa'>
  <block wx:for="{{imgUrls}}"> 
    <swiper-item >
      <image src="{{item}}"class="slide-image" style='width:100%;height:100%'/>
    </swiper-item>
  </block>
</swiper>
</view>

剛剛練習佈局使用了一下swiper容器；

遇到的問題：1.外層嵌套<view class='container'></view>該組件不顯示；

                      2.在iphone5顯示是寬度佔滿屏幕的；換了更大屏幕佔不滿，右邊有空隙；

解決辦法：1經過實驗這個組件外層就是不能嵌套<view class='container'></view>，可是把class改爲其餘就能夠正常顯示；

                   這是由於app.wxss中全局規定了container的樣式把它刪了就能夠正常顯示了（艹，這是重點啊）；

                  2改<image>的寬和高是不能使該組件寬度佔滿屏i幕的，要改外層的<view>或直接改<swiper>的width爲100%；這樣不管在什麼屏幕均可以佔滿了；

                  3改<swiper-item>的屬性沒什麼卵用使圖片佔滿每一個item徹底顯示,要設置image的寬和高都爲100%，可是圖片大小不合適會變形；

補充：<image>組件的mode屬性，能夠控制圖片的縮放；

scaleToFill    不保持縱橫比縮放圖片，使圖片的寬高徹底拉伸至填滿 image 元素
aspectFit    保持縱橫比縮放圖片，使圖片的長邊能徹底顯示出來。也就是說，能夠完整地將圖片顯示出來。
aspectFill    保持縱橫比縮放圖片，只保證圖片的短邊能徹底顯示出來。也就是說，圖片一般只在水平或垂直方向是完整的，另外一個方向將會發生截取。
widthFix    寬度不變，高度自動變化，保持原圖寬高比不變