微信小程序?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)畫(huà)時(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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序 swiper組件輪播圖詳解及實(shí)例
- 微信小程序之swiper輪播圖中的圖片自適應(yīng)高度的方法
- 微信小程序視圖容器(swiper)組件創(chuàng)建輪播圖
- 微信小程序使用swiper組件實(shí)現(xiàn)類(lèi)3D輪播圖
- 微信小程序 輪播圖swiper詳解及實(shí)例（源碼下載）
- 微信小程序使用swiper組件實(shí)現(xiàn)層疊輪播圖
- 微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】
- 微信小程序?qū)崙?zhàn)之輪播圖（3）
- 微信小程序?qū)崿F(xiàn)Swiper輪播圖效果
- 微信小程序?qū)崿F(xiàn)輪播圖指示器
相關(guā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
函數(shù)和作用域是JavaScript的重要組成部分，我們?cè)谑褂肑avaScript編寫(xiě)程序的過(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
indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。本文給大家介紹ie8 不支持 indexof 的解決方法2016-03-03
第一次接觸神奇的Bootstrap導(dǎo)航條，Bootstrap讓W(xué)eb開(kāi)發(fā)更迅速、更簡(jiǎn)單，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)工作時(shí)間段選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02