注冊

小程序輪播圖代碼,微信小程序輪播圖開發(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ā)