注冊

小程序輪播圖代碼,微信小程序輪播圖開發(fā)文檔

2018-01-12
導(dǎo)讀：輪播圖是小程序中很重要的一個(gè)組件，對于開發(fā)小程序來說，要如何做呢，如下：...
輪播圖是小程序中很重要的一個(gè)組件，對于開發(fā)小程序來說，要如何做呢，如下：
 
使用微信提供的swiper控件，在頁面wxml中添加控件
 
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <image src='{{item.url}}' class='slide-image' mode='aspectFill' ></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
在wxss中設(shè)置樣式
.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}
在js 中設(shè)置數(shù)據(jù)
 
  data: {
    background:[
      {url:'../../images/banner/banner1.jpeg'},
      { url: '../../images/banner/banner2.png' },
      { url: '../../images/banner/banner3.png' },
    ],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500
  },
小程序輪播圖代碼,微信小程序輪播圖開發(fā)文檔
就這么簡單，輪播圖就出現(xiàn)了，是不是很簡單呢。
重磅推薦：小程序開店目錄

第一部分：小商店是什么

第二部分：如何開通一個(gè)小商店

第三部分：如何登錄小商店

第四部分：開店任務(wù)常見問題

第五部分：小商店可以賣什么

第六部分：HiShop小程序特色功能

第七部分：小程序直播

第八部分：小程序收貨/物流

第九部分：小程序怎么結(jié)算

第十部分：小程序客服

第十一部分：電商創(chuàng)業(yè)

第十二部分：小程序游戲開發(fā)