微信小程序?qū)崿F(xiàn)輪播圖指示器
更新時(shí)間：2022年06月24日 16:32:00 作者：顧舟
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)輪播圖指示器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)輪播圖指示器的具體代碼，供大家參考，具體內(nèi)容如下
1.文件目錄
2.輪播圖頁面布局
需求：自定義輪播指示器：當(dāng)輪播圖發(fā)生變化時(shí)，自定義輪播指示器跟隨圖片發(fā)生對(duì)應(yīng)改變
bindchange:current 改變時(shí)會(huì)觸發(fā) change 事件，即當(dāng)圖片索引發(fā)生變化時(shí)觸發(fā)的事件
current：當(dāng)前所在滑塊的 index (number類型)
autoplay: 是否自動(dòng)切換
interval: 自動(dòng)切換時(shí)間間隔
circular: 是否采用銜接滑動(dòng)
<view class="swiper">
<!-- bindchange:current 改變時(shí)會(huì)觸發(fā) change 事件-->
? <swiper bindchange="change" autoplay interval="{{1500}}" circular>
? ? <swiper-item wx:key="*this" wx:for="{{banners}}">
? ? ? <image src="{{item}}" style="height: 150px;" />
? ? </swiper-item>
? </swiper>
? <!-- 輪播圖指示器 -->
? <view class="dot">
? <!--?
? ? index:小圓點(diǎn)的索引
? ? current：圖片的索引
? ?-->
? ? <text wx:key="this" wx:for="{{4}}" ?class="{{index===current?'active':''}}"></text>
? </view>
</view>3.輪播圖樣式文件
.swiper {
? position: relative;
}
?
.dot {
? display: flex;
? justify-content: center;
? position: absolute;
? width: 100%;
? height: 25rpx;
? bottom: 20rpx;
}
?
.dot text {
? width: 80rpx;
? height: 25rpx;
? border-radius: 20rpx;
? background: peachpuff;
? margin-right: 10rpx;
}
?
/* 小圓點(diǎn)高亮顯示 */
.dot text.active{
? background: red;
}4.輪播圖邏輯實(shí)現(xiàn)
Page({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? // 用于記錄小圓點(diǎn)的索引
? ? current:0,
? ? // 輪播圖數(shù)據(jù)
? ? banners: [
? ? ? '../../assets/banners/01.jpg',
? ? ? '../../assets/banners/02.jpg',
? ? ? '../../assets/banners/03.jpg',
? ? ? '../../assets/banners/04.jpg'
? ? ]
? },
?
? // 圖片切換處理事件
? change(e) {
? ? // e.detail.current：小圓點(diǎn)的索引
? ? // 更新數(shù)據(jù)
? ? this.setData({current:e.detail.current});
? }?
})5.實(shí)現(xiàn)效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文給大家匯總介紹的是獲取JavaScript 數(shù)組中最大最小值的方法和示例，非常的詳細(xì)和全面，希望對(duì)大家學(xué)習(xí)JavaScript能夠有所幫助2016-06-06
html 5.0的canvas可以獲取到圖片的像素點(diǎn)了。這樣，我們可以做很多以圖片有關(guān)的操作和渲染了。當(dāng)然今后也會(huì)給瀏覽器渲染引擎更高的要求。（YY, 什么時(shí)候html渲染引擎也支持多核和GPU呢？）2009-04-04
微信小程序?qū)崿F(xiàn)電子簽名并導(dǎo)出圖片
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)電子簽名，并導(dǎo)出圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
淺談高大上的微信小程序中渲染html內(nèi)容—技術(shù)分享
大部分Web應(yīng)用的富文本內(nèi)容都是以HTML字符串的形式存儲(chǔ)的，那么在微信小程序中，應(yīng)當(dāng)如何渲染這部分內(nèi)容呢？感興趣的小伙伴們可以參考一下2018-10-10
經(jīng)常用到對(duì)xml的操作，Java里面有dom和dom4j等工具類，但是Javascript就沒有，所以自己寫了一個(gè)，目前算作第一個(gè)版本吧?？隙ㄟ€有很多地方需要改進(jìn)，如果有需要用的朋友，可以把bug和需要完善改進(jìn)的地方留言或評(píng)論。2009-10-10
直接在JS里創(chuàng)建JSON數(shù)據(jù)然后遍歷使用
本節(jié)為大家講解下直接在JS里創(chuàng)建JSON數(shù)據(jù)，然后遍歷使用,需要的朋友可以參考下2014-07-07
JavaScript MutationObserver實(shí)例講解
MutationObserver用來監(jiān)視DOM變動(dòng)。DOM的任何變動(dòng)，比如節(jié)點(diǎn)增減、屬性的變動(dòng)、文本內(nèi)容的變動(dòng)都會(huì)觸發(fā)MutationObserver事件，它與事件有一個(gè)本質(zhì)不同：事件是同步觸發(fā)，MutationObserver則是異步觸發(fā)，DOM的變動(dòng)并不會(huì)馬上觸發(fā)，而是要等到當(dāng)前所有DOM操作都結(jié)束才觸發(fā)2022-12-12
ECMAScript5中的對(duì)象存取器屬性：getter和setter介紹
這篇文章主要介紹了ECMAScript5中的對(duì)象屬性存取器：getter和setter介紹,事實(shí)上在除ie外最新主流瀏覽器的實(shí)現(xiàn)中,任何一個(gè)對(duì)象的鍵值都可以被getter和setter方法所取代,這被稱之為“存取器屬性”,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了Bootstrap下拉菜單實(shí)例代碼的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06![file-loader打包圖片文件時(shí)路徑錯(cuò)誤輸出為[object-module]的解決方法](http://img.jbzj.com/images/xgimg/bcimg9.png)
file-loader打包圖片文件時(shí)路徑錯(cuò)誤輸出為[object-module]的解決方法
這篇文章主要介紹了file-loader打包圖片文件時(shí)路徑錯(cuò)誤輸出為[object-module]的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01