廣告輪播圖幾乎每個小程序都會用到的，所以有必要講解一下，老規(guī)矩，先看效果圖，其實(shí)不看我相信大家也都知道，拿出來講就是讓大家熟悉一下小程序基礎(chǔ)控件swiper的屬性

效果圖.gif

swiper屬性介紹

廣告輪播圖效果的實(shí)現(xiàn)

一、wxml界面的實(shí)現(xiàn)

<view class='title-line'>swiper</view>

<!-- banner -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" vertical="{{isVertical}}" duration="{{duration}}" circular='false'>
  <swiper-item wx:for="{{imgUrls}}">
    <image src="{{item}}" />
  </swiper-item>
</swiper>
滑動進(jìn)度條控制滾動過度時間
<slider bindchange="durationChange" show-value min="500" max="2000"/>

<view class='line'></view>
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" vertical="{{true}}" duration="{{duration}}" circular='true'>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" />
    </swiper-item>
  </block>
</swiper> 

界面實(shí)現(xiàn)簡單，運(yùn)用小程序封裝的控件swipe就可以輕松實(shí)現(xiàn)，為了對比效果，我生成了兩個廣告輪播圖，一個是橫行滾動，一個是縱向滾動

二、xxx.js屬性的控制

Page({
  data: {
    // banner
    imgUrls: [
      'http://7xnmrr.com1.z0.glb.clouddn.com/red.png',
      'http://7xnmrr.com1.z0.glb.clouddn.com/yellow.png',
      'http://7xnmrr.com1.z0.glb.clouddn.com/green.png'
    ],
    indicatorDots: true, //是否顯示面板指示點(diǎn)
    autoplay: true, //是否自動切換
    interval: 3000, //自動切換時間間隔,3s
    duration: 1000, //  滑動動畫時長1s
 },

  durationChange:function(e)
  {
    this.setData({
      duration: e.detail.value
    })
  },

js中的屬性我都在代碼中注釋了，想要更改屬性，直接修改對應(yīng)的值就好，durationChange是用來控制滑動動畫時長的，通過滑動進(jìn)度條即可

三、wxss樣式

* 直接設(shè)置swiper屬性 */

swiper {
  height: 400rpx;
}

swiper-item image {
  width: 100%;
  height: 100%;
}

別小看這幾行代碼，代碼君之前為了設(shè)置輪播圖從滿屏幕，找了好久，才設(shè)置成功的，一般使用的時候，把上面代碼拷貝進(jìn)去就行，頂多去設(shè)置一下swiper的高度

總結(jié)

今天周五，所以講解的內(nèi)容也比較少，相信大家看一遍，大概就學(xué)的差不多啦，最后祝大家周末愉快~

相關(guān)文章推薦：微信小程序?qū)崙?zhàn)篇-購物車