微信小程序?qū)崿F(xiàn)banner圖輪播效果
更新時間:2020年06月28日 11:10:03 作者:緣飛夢
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)banner圖輪播效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)banner圖輪播的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:
indicator-active-color="#007aff"http://修改選中圖片圓點的顏色
js:
const app = getApp() Page({ data: { //-----------模擬banner圖----------- imgUrls: [ '/image/1545118381903.jpg', '/image/1545118566631.jpg' ], circular: true, //是否顯示畫板指示點 indicatorDots: true, //選中點的顏色 //是否豎直 vertical: false, //是否自動切換 autoplay: true, //自動切換的間隔 interval: 3000, //滑動動畫時長毫秒 duration: 1000, //所有圖片的高度 imgheights: [], //圖片寬度 imgwidth: 750, //默認 current: 0 }, imageLoad: function (e) {//獲取圖片真實寬度 var imgwidth = e.detail.width, imgheight = e.detail.height, //寬高比 ratio = imgwidth / imgheight; console.log(imgwidth, imgheight) //計算的高度值 var viewHeight = 750 / ratio; var imgheight = viewHeight; var imgheights = this.data.imgheights; //把每一張圖片的對應的高度記錄到數(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; }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)網(wǎng)頁加載進度條代碼超簡單
網(wǎng)頁進度條能夠更好的反應當前網(wǎng)頁的加載進度情況,loading進度條可用動畫的形式從開始0%到100%完成網(wǎng)頁加載這一過程。代碼簡單易懂,效果非常好,需要的一起學習學習吧2015-09-09詳解JavaScript中的強制類型轉(zhuǎn)換和自動類型轉(zhuǎn)換
這篇文章中我們將深入探索一下 JavaScript 中的類型轉(zhuǎn)換,揭示強制類型轉(zhuǎn)換、自動類型轉(zhuǎn)換和轉(zhuǎn)換函數(shù)的奧秘,快跟隨小編一起學習一下吧2023-12-12layui之table checkbox初始化時選中對應選項的方法
今天小編就為大家分享一篇layui之table checkbox初始化時選中對應選項的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09