微信小程序廣告輪播圖的制作

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


效果圖.gif

swiper屬性介紹

屬性名 作用 參數(shù)值
indicator-dots 是否顯示面板指示點(diǎn) true/false 默認(rèn)是false
indicator-color 指示點(diǎn)顏色 默認(rèn)值rgba(0, 0, 0, .3)
indicator-active-color 當(dāng)前選中的指示點(diǎn)顏色 默認(rèn)顏色#000000
autoplay 是否自動切換 true/false 默認(rèn)是false
interval 自動切換時間間隔 number 默認(rèn)是5000
duration 滑動動畫時長 number 默認(rèn)是500
vertical 滑動方向是否為縱向 true/false 默認(rèn)是false
bindchange current 改變時會觸發(fā) change 事件,event.detail = {current: current, source: source}

廣告輪播圖效果的實(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)篇-購物車
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,067評論 25 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,198評論 4 61
  • 很多同學(xué)在網(wǎng)上詢問使用哪款音頻加速器比較好,每年都很多人問,小編今天就給大家推薦幾款考生用的比較多的音頻播放器...
    斗考網(wǎng)閱讀 3,389評論 0 0
  • 裝修施工組織設(shè)計包括三個大的方面,分別是施工方案、施工進(jìn)度計劃及保證措施、保證質(zhì)量措施,在這三個大部分中,還有很多...
    荒古遺塵閱讀 436評論 0 1
  • 人生自古情長短,何必為而傷悲。
    無極劍神閱讀 105評論 0 0