微信小程序?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,
//是否顯示畫板指示點(diǎn)
indicatorDots: true,
//選中點(diǎn)的顏色
//是否豎直
vertical: false,
//是否自動(dòng)切換
autoplay: true,
//自動(dòng)切換的間隔
interval: 3000,
//滑動(dòng)動(dòng)畫時(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:
<!-------------首頁輪播圖----------------- -->
<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)頁加載進(jìn)度條代碼超簡(jiǎn)單
網(wǎng)頁進(jìn)度條能夠更好的反應(yīng)當(dāng)前網(wǎng)頁的加載進(jìn)度情況,loading進(jìn)度條可用動(dòng)畫的形式從開始0%到100%完成網(wǎng)頁加載這一過程。代碼簡(jiǎn)單易懂,效果非常好,需要的一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09
js前端如何寫一個(gè)精確的倒計(jì)時(shí)代碼
關(guān)于寫倒計(jì)時(shí)大家可能都都比較熟悉,使用 setTimeout 或 setInterval 就可以搞定。幾秒鐘或者幾分鐘的倒計(jì)時(shí)這樣寫沒有問題,但是如果是長(zhǎng)時(shí)間的倒計(jì)時(shí),這樣寫就會(huì)不準(zhǔn)確2019-10-10
詳解JavaScript中的強(qiáng)制類型轉(zhuǎn)換和自動(dòng)類型轉(zhuǎn)換
這篇文章中我們將深入探索一下 JavaScript 中的類型轉(zhuǎn)換,揭示強(qiáng)制類型轉(zhuǎn)換、自動(dòng)類型轉(zhuǎn)換和轉(zhuǎn)換函數(shù)的奧秘,快跟隨小編一起學(xué)習(xí)一下吧2023-12-12
PDF.js前端開發(fā)使用代碼示例及實(shí)用技巧
pdf.js是一款Nozilla開發(fā)的、用于網(wǎng)頁上顯示pdf文檔的Javascript庫,提供pdf文件的在線閱讀,這篇文章主要給大家介紹了關(guān)于PDF.js前端開發(fā)使用實(shí)用技巧的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
layui之table checkbox初始化時(shí)選中對(duì)應(yīng)選項(xiàng)的方法
今天小編就為大家分享一篇layui之table checkbox初始化時(shí)選中對(duì)應(yīng)選項(xiàng)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
微信小程序?qū)崿F(xiàn)簡(jiǎn)易加法計(jì)算器
這篇文章主要為大家詳細(xì)介紹了微信小程序加法計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09

