微信小程式圖片輪播組件gallery slider使用方法詳解，

小程式圖片輪播組件gallery slider使用方法詳解，

本文執行個體為大家分享了小程式圖片輪播組件的具體代碼，供大家參考，具體內容如下

先上：

wxml

<scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore"> <view class="swiper">  <swiper class="swiper-box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"      indicator-color="#fff" indicator-active-color="red">    <block wx:for-items="{{banner_url}}" wx:key="item.id">      <navigator url="../blogList/blogList">       <swiper-item>        <block wx:if="{{item}}">         <image class="imgw" src="{{item.url}}" mode="aspectFill"/>        </block>        <block wx:else>         <image src="../../images/default_pic.png" mode="aspectFill"></image>        </block>       </swiper-item>      </navigator>    </block>  </swiper> </view></scroll-view> 

wxss

.imgw{width:100%;}

js

/** *頁面的初始資料 */data: { banner_url: data.bannerList(), open: false, indicatorDots: true,//是否顯示面板指示點 autoplay: true,//是否開啟自動切換 interval: 3000,//自動切換時間間隔 duration: 500//滑動動畫時間長度}

最終效果：

總結：

1. scroll-view組件的作用是可以觸發觸摸滑動
2. swiper組件的作用是製作圖片自動切換，形成輪播
3. navigator組件的作用是給每個圖片添加連結
主要是scroll-view和swiper兩個組件製作成可滑動的輪播組件。

DEMO下載

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。