微信小程序之圖片輪播（未完）

這個世界有兩件事我們不能不做：一是趕路，二是停下來看看自己是否擁有一份好的心態。好心態是人們一生中的好伴侶，讓人愉悅和健康。人生感悟：要有陽光般的心態

微信小程序——輪播圖效果

官方文檔swiper

一、簡單粗暴

// index.wxml
<view class="container">
  <!--輪播圖-->
  <swiper autoplay indicator-dots class='autoImg'>
    <block wx:for="{{imgBannerSrc}}" wx:for-item="itemName">
      <swiper-item>
        <image src='{{itemName}}'></image>
      </swiper-item>
    </block>
  </swiper>
</view>

//index.js
  data: {
     ------
    imgBannerSrc: [ 
	    '../../image/01.jpg', 
	    '../../image/02.jpg', 
	    '../../image/03.jpg',
	    '../../image/04.jpg',
	    '../../image/05.jpg',
      ]
  }

//inedx.wxss
.autoImg{
  width: 100%;
  height: 180px;
}

問題與思考

---

1.小程序編譯後頂部出現一段空白

.container{
	padding:0rpx;
}

2.view是一個組件，會在頁面上做渲染；block不是一個組件，它僅僅是一個包裝元素，只接受控制屬性，不會在頁面中做任何渲染