快捷導(dǎo)航

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

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

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

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

先來看看效果圖：

主要用swiper + swiper-item來實(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)文章

uniapp中uni.navigateBack返回后刷新頁(yè)面數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了uniapp中uni.navigateBack返回后刷新頁(yè)面數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-11-11
JavaScript使用localStorage判斷設(shè)置值是否過期
本文主要介紹了JavaScript使用localStorage判斷設(shè)置值是否過期，通過設(shè)置過期時(shí)間，我們可以使用 setItemWithExpiration 函數(shù)將數(shù)據(jù)存儲(chǔ)到 localStorage 中，并使用 getItemWithExpiration 函數(shù)獲取數(shù)據(jù)并檢查是否過期，感興趣的可以了解一下
2023-05-05
Bootstrap實(shí)現(xiàn)的表格合并單元格示例
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)的表格合并單元格,涉及bootstrap界面布局相關(guān)操作技巧,需要的朋友可以參考下
2018-02-02
JS按字節(jié)截取字符長(zhǎng)度實(shí)例
這篇文章主要介紹了JS按字節(jié)截取字符長(zhǎng)度實(shí)例，有需要的朋友可以參考一下
2013-11-11
詳解設(shè)置Webstorm 利用babel將ES6自動(dòng)轉(zhuǎn)碼成ES5
這篇文章主要介紹了詳解設(shè)置Webstorm 利用babel將ES6自動(dòng)轉(zhuǎn)碼成ES5，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
輕松實(shí)現(xiàn)js彈框顯示選項(xiàng)
這篇文章主要為大家詳細(xì)介紹了js輕松實(shí)現(xiàn)彈框顯示選項(xiàng)效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
如何用JavaScript學(xué)習(xí)算法復(fù)雜度
這篇文章主要介紹了如何用JavaScript學(xué)習(xí)算法復(fù)雜度，對(duì)算法感興趣的同學(xué)，一定要看一下
2021-04-04
JS模擬百度搜索框和選項(xiàng)卡的實(shí)現(xiàn)
本文主要介紹了JS模擬百度搜索框和選項(xiàng)卡的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-03-03
原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例代碼
像平時(shí)購(gòu)物選擇地址時(shí)一樣，通過選擇的省動(dòng)態(tài)加載城市列表，通過選擇的城市動(dòng)態(tài)加載縣區(qū)列表，從而可以實(shí)現(xiàn)省市縣的三級(jí)聯(lián)動(dòng)，下面使用原生的JavaScript來實(shí)現(xiàn)這個(gè)功能，需要的朋友參考下吧
2016-02-02
Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版
這篇文章主要為大家詳細(xì)介紹了Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版，結(jié)合導(dǎo)航條和下拉菜單進(jìn)行改進(jìn),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09