快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)輪播圖效果

更新時(shí)間：2017年09月07日 08:39:54 作者：切切歆語(yǔ)

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)輪播圖效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

微信小程序?qū)崿F(xiàn)輪播圖，和網(wǎng)站，APP的效果差不多，代碼少，效率高。

先來(lái)看看效果圖：

主要用swiper + swiper-item來(lái)實(shí)現(xiàn)

 <view class='swiper'>滑塊視圖容器</view>

<!--
 indicator-dots='true' 是否顯示指示點(diǎn) 默認(rèn) false
 indicator-color:指示點(diǎn)顏色
 indicator-active-color:選中的指示點(diǎn)顏色
 autoplay：是否自動(dòng)切換 默認(rèn)：false
 interval:自動(dòng)切換時(shí)間間隔
 duration：滑動(dòng)動(dòng)畫時(shí)長(zhǎng)
 vertical 是否改成縱向， 默認(rèn) false
 -->

<swiper indicator-dots='true' indicator-color='gray' indicator-active-color='green' autoplay='true' interval='5000' duration='500'>
 <block wx:for="{{imgUrl}}">
  <swiper-item class="item_image">
   <image src='{{item}}' class='swiper_image' mode="aspectFill"></image>
  </swiper-item>
 </block>

</swiper>

一個(gè)簡(jiǎn)單的小案例，輪播圖，代碼簡(jiǎn)潔，功能強(qiáng)大。

源碼點(diǎn)擊下載

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

您可能感興趣的文章:

相關(guān)文章

js代碼實(shí)現(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了js代碼實(shí)現(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
JavaScript實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
淺談JavaScript的函數(shù)及作用域
函數(shù)和作用域是JavaScript的重要組成部分，我們?cè)谑褂肑avaScript編寫程序的過(guò)程中經(jīng)常要用到這兩部分內(nèi)容，借助此文一起來(lái)鞏固下學(xué)習(xí)的內(nèi)容吧。
2016-12-12
ionic組件ion-tabs選項(xiàng)卡切換效果實(shí)例
這篇文章主要為大家詳細(xì)介紹了ionic組件ion-tabs選項(xiàng)卡切換效果實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種方法小結(jié)
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種方法小結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-06-06
微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)補(bǔ)零功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)補(bǔ)零功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
JavaScript 不支持 indexof 該如何解決
indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。本文給大家介紹ie8 不支持 indexof 的解決方法
2016-03-03
第一次接觸神奇的Bootstrap導(dǎo)航條
第一次接觸神奇的Bootstrap導(dǎo)航條，Bootstrap讓W(xué)eb開(kāi)發(fā)更迅速、更簡(jiǎn)單，感興趣的小伙伴們可以參考一下
2016-08-08
微信小程序?qū)崿F(xiàn)工作時(shí)間段選擇
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)工作時(shí)間段選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-02-02