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

更新時(shí)間：2018年01月31日 15:23:56 作者：Rattenking

這篇文章主要為大家詳細(xì)介紹了微信小程序圖片輪播組件gallery slider的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序圖片輪播組件的具體代碼，供大家參考，具體內(nèi)容如下

先上效果圖：

微信小程序圖片輪播動(dòng)態(tài)圖

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

/**
 *頁(yè)面的初始數(shù)據(jù)
 */
data: {
 banner_url: data.bannerList(),
 open: false,
 indicatorDots: true,//是否顯示面板指示點(diǎn)
 autoplay: true,//是否開(kāi)啟自動(dòng)切換
 interval: 3000,//自動(dòng)切換時(shí)間間隔
 duration: 500//滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)
}

最終效果：

這里寫(xiě)圖片描述

總結(jié)：

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

DEMO下載

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

利用types增強(qiáng)vscode中js代碼提示功能詳解
這篇文章主要給大家介紹了如何增強(qiáng)vscode中js代碼提示功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
JavaScript中如何跳出forEach循環(huán)代碼示例
循環(huán)遍歷一個(gè)元素是開(kāi)發(fā)中最常見(jiàn)的需求之一,下面這篇文章主要給大家介紹了關(guān)于JavaScript中如何跳出forEach循環(huán)的相關(guān)資料,文章通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
網(wǎng)頁(yè)源代碼保護(hù)(禁止右鍵、復(fù)制、另存為、查看源文件)
網(wǎng)頁(yè)源代碼保護(hù)(禁止右鍵、復(fù)制、另存為、查看源文件)，只能起一些簡(jiǎn)單的防護(hù)
2012-05-05
Javascript中帶名匿名箭頭函數(shù)的重要區(qū)別(推薦)
這篇文章主要介紹了Javascript中帶名匿名箭頭函數(shù)的重要區(qū)別，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-01-01
JS canvas繪制五子棋的棋盤(pán)
這篇文章主要為大家詳細(xì)介紹了JS canvas繪制五子棋棋盤(pán)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-09-09
javascript中Promise使用詳解
這篇文章主要介紹了javascript中Promise使用詳解，關(guān)于Promise的使用相關(guān)的知識(shí)點(diǎn)下面文章內(nèi)容介紹詳細(xì)具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-04-04
使用js畫(huà)圖之餅圖
這篇文章主要介紹了使用js繪制幾何圖形系列教程的繪制餅圖篇,需要的朋友可以參考下
2015-01-01
Avalon中文長(zhǎng)字符截取、關(guān)鍵字符隱藏、自定義過(guò)濾器
avalon是一個(gè)簡(jiǎn)單易用迷你的MVVM框架。通過(guò)本文給大家介紹Avalon中文長(zhǎng)字符截取、關(guān)鍵字符隱藏、自定義過(guò)濾器的相關(guān)資料，需要的朋友一起學(xué)習(xí)吧
2016-05-05
關(guān)于axios返回空對(duì)象的問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于axios返回空對(duì)象的問(wèn)題解決方法，文中介紹的非常詳細(xì)，相信對(duì)大家學(xué)習(xí)或者使用axios具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-04-04
Javascript 修改String 對(duì)象增加去除空格功能(示例代碼)
這篇文章主要介紹了Javascript 修改String 對(duì)象增加去除空格功能(示例代碼)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11