溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序圖片輪播組件gallery slider怎么用

發布時間:2021-07-06 10:19:39 來源:億速云 閱讀:285 作者:小新 欄目:web開發

這篇文章主要介紹了微信小程序圖片輪播組件gallery slider怎么用,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

具體內容如下

先上效果圖:

微信小程序圖片輪播組件gallery slider怎么用

wxml

<scroll-view scroll-y="true"  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//滑動動畫時長
}

最終效果:

微信小程序圖片輪播組件gallery slider怎么用

總結:

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

感謝你能夠認真閱讀完這篇文章,希望小編分享的“微信小程序圖片輪播組件gallery slider怎么用”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女