微信小程序?qū)崿F(xiàn)banner圖輪播效果
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)banner圖輪播的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:
indicator-active-color="#007aff"http://修改選中圖片圓點(diǎn)的顏色
js:
const app = getApp() Page({ data: { //-----------模擬banner圖----------- imgUrls: [ '/image/1545118381903.jpg', '/image/1545118566631.jpg' ], circular: true, //是否顯示畫(huà)板指示點(diǎn) indicatorDots: true, //選中點(diǎn)的顏色 //是否豎直 vertical: false, //是否自動(dòng)切換 autoplay: true, //自動(dòng)切換的間隔 interval: 3000, //滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)毫秒 duration: 1000, //所有圖片的高度 imgheights: [], //圖片寬度 imgwidth: 750, //默認(rèn) current: 0 }, imageLoad: function (e) {//獲取圖片真實(shí)寬度 var imgwidth = e.detail.width, imgheight = e.detail.height, //寬高比 ratio = imgwidth / imgheight; console.log(imgwidth, imgheight) //計(jì)算的高度值 var viewHeight = 750 / ratio; var imgheight = viewHeight; var imgheights = this.data.imgheights; //把每一張圖片的對(duì)應(yīng)的高度記錄到數(shù)組里 imgheights[e.target.dataset.id] = imgheight; this.setData({ imgheights: imgheights }) }, bindchange: function (e) { // console.log(e.detail.current) this.setData({ current: e.detail.current }) }, } })
wxml:
<!-------------首頁(yè)輪播圖----------------- --> <view class='swiper'> <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}'indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;"> <block wx:for='{{imgUrls}}' wx:key="{{index}}"> <swiper-item> <image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad" /> </swiper-item> </block> </swiper> </view>
wxss:
.swiper image { width: 100%; height: auto; } .swiper-image { height: 100%; width: 100%; } .slide-image { height: 100%; width: 100%; display: block; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)加載進(jìn)度條代碼超簡(jiǎn)單
網(wǎng)頁(yè)進(jìn)度條能夠更好的反應(yīng)當(dāng)前網(wǎng)頁(yè)的加載進(jìn)度情況,loading進(jìn)度條可用動(dòng)畫(huà)的形式從開(kāi)始0%到100%完成網(wǎng)頁(yè)加載這一過(guò)程。代碼簡(jiǎn)單易懂,效果非常好,需要的一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09js前端如何寫(xiě)一個(gè)精確的倒計(jì)時(shí)代碼
關(guān)于寫(xiě)倒計(jì)時(shí)大家可能都都比較熟悉,使用 setTimeout 或 setInterval 就可以搞定。幾秒鐘或者幾分鐘的倒計(jì)時(shí)這樣寫(xiě)沒(méi)有問(wèn)題,但是如果是長(zhǎng)時(shí)間的倒計(jì)時(shí),這樣寫(xiě)就會(huì)不準(zhǔn)確2019-10-10詳解JavaScript中的強(qiáng)制類(lèi)型轉(zhuǎn)換和自動(dòng)類(lèi)型轉(zhuǎn)換
這篇文章中我們將深入探索一下 JavaScript 中的類(lèi)型轉(zhuǎn)換,揭示強(qiáng)制類(lèi)型轉(zhuǎn)換、自動(dòng)類(lèi)型轉(zhuǎn)換和轉(zhuǎn)換函數(shù)的奧秘,快跟隨小編一起學(xué)習(xí)一下吧2023-12-12PDF.js前端開(kāi)發(fā)使用代碼示例及實(shí)用技巧
pdf.js是一款Nozilla開(kāi)發(fā)的、用于網(wǎng)頁(yè)上顯示pdf文檔的Javascript庫(kù),提供pdf文件的在線閱讀,這篇文章主要給大家介紹了關(guān)于PDF.js前端開(kāi)發(fā)使用實(shí)用技巧的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04layui之table checkbox初始化時(shí)選中對(duì)應(yīng)選項(xiàng)的方法
今天小編就為大家分享一篇layui之table checkbox初始化時(shí)選中對(duì)應(yīng)選項(xiàng)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09微信小程序?qū)崿F(xiàn)簡(jiǎn)易加法計(jì)算器
這篇文章主要為大家詳細(xì)介紹了微信小程序加法計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09