欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2020年06月28日 11:10:03   作者:緣飛夢(mèng)  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)banner圖輪播效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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)文章

  • 詳解jQuery插件開(kāi)發(fā)方式

    詳解jQuery插件開(kāi)發(fā)方式

    本文介紹了jQuery擴(kuò)展、私有域、定義插件的基本步驟等知識(shí),有需要的朋友可以看下
    2016-11-11
  • JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)加載進(jìn)度條代碼超簡(jiǎ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-09
  • Javascript作用域和作用域鏈原理解析

    Javascript作用域和作用域鏈原理解析

    這篇文章主要介紹了Javascript作用域和作用域鏈原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-03-03
  • js前端如何寫(xiě)一個(gè)精確的倒計(jì)時(shí)代碼

    js前端如何寫(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
  • Webpack之tree-starking 解析

    Webpack之tree-starking 解析

    這篇文章主要介紹了Webpack之tree-starking 解析,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Bootstrap實(shí)現(xiàn)彈性搜索框

    Bootstrap實(shí)現(xiàn)彈性搜索框

    這篇文章主要介紹了Bootstrap實(shí)現(xiàn)彈性搜索框的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-07-07
  • 詳解JavaScript中的強(qiáng)制類(lèi)型轉(zhuǎn)換和自動(dòng)類(lèi)型轉(zhuǎn)換

    詳解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-12
  • PDF.js前端開(kāi)發(fā)使用代碼示例及實(shí)用技巧

    PDF.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-04
  • layui之table checkbox初始化時(shí)選中對(duì)應(yīng)選項(xiàng)的方法

    layui之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ì)算器

    微信小程序?qū)崿F(xiàn)簡(jiǎn)易加法計(jì)算器

    這篇文章主要為大家詳細(xì)介紹了微信小程序加法計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-09-09

最新評(píng)論