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

微信小程序?qū)崿F(xiàn)一個(gè)簡(jiǎn)單swiper代碼實(shí)例

 更新時(shí)間：2019年12月30日 11:55:05   作者：暮雪上的晨星  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)一個(gè)簡(jiǎn)單swiper代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)一個(gè)簡(jiǎn)單swiper代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

話不多說(shuō)，上截圖

HTML

<swiper class="swiper-block" previous-margin="70rpx" next-margin="70rpx" current="0" autoplay="true" bindchange="swiperChange" circular="true">
   <block wx:for="{{totalData.banners}}" wx:index="{{index}}" wx:key="bannerList">
    <swiper-item class="swiper-item">
     <image mode="aspectFill" src="{{item.cover}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}" />  <br>     </swiper-item>
   </block>
  </swiper>

css

.swiper-block {
 height: 320rpx;
 width: 100%;
}
 
.swiper-item {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 overflow: unset;
 text-align: center;
}
 
.slide-image {
 height: 230rpx;
 width: 526rpx;
 border-radius: 10rpx;
 box-shadow: 0px 3px 10px 0px rgba(51, 51, 51, 0.3);
 margin: 0 rpx 30rpx;
 z-index: 1;
}
 
.active {
 transform: scale(1.21);
 transition: all 0.2s ease-in 0s;
 z-index: 20;
}

js

swiperChange(e) {
 const that = this;
 that.setData({
  swiperIndex: e.detail.current,
 })
},

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 利用JavaScript如何查詢某個(gè)值是否數(shù)組內(nèi)

    利用JavaScript如何查詢某個(gè)值是否數(shù)組內(nèi)

    這篇文章主要給大家介紹了關(guān)于利用JavaScript如何查詢某個(gè)值是否數(shù)組內(nèi)的相關(guān)資料，文中通過(guò)示例代碼分別介紹了實(shí)現(xiàn)該問(wèn)題的一些解決方法是否可行，需要的朋友可以參考借鑒，下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-07-07
  • HTML+CSS+JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果

    HTML+CSS+JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果

    這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • js onclick事件傳參講解

    js onclick事件傳參講解

    本文是對(duì)js中的onclick事件傳參進(jìn)行了詳細(xì)的講解，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
    2013-11-11
  • javascript模擬的Ping效果代碼 （Web Ping）

    javascript模擬的Ping效果代碼 （Web Ping）

    JS雖然發(fā)送不了真正Ping的ICMP數(shù)據(jù)包,但Ping的本質(zhì)仍然是請(qǐng)求/回復(fù)的時(shí)間差,HTTP自然可以實(shí)現(xiàn)此功能.
    2011-03-03
  • javascript滾輪控制模擬滾動(dòng)條

    javascript滾輪控制模擬滾動(dòng)條

    這篇文章主要為大家詳細(xì)介紹了javascript滾輪控制模擬滾動(dòng)條的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-10-10
  • mock.js模擬前后臺(tái)交互

    mock.js模擬前后臺(tái)交互

    這篇文章主要為大家詳細(xì)介紹了mock.js模擬前后臺(tái)交互的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-07-07
  • B/S(Web)實(shí)時(shí)通訊解決方案分享

    B/S(Web)實(shí)時(shí)通訊解決方案分享

    這篇文章主要為大家分享了B/S(Web)實(shí)時(shí)通訊的解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-04-04
  • 理解Javascript文件動(dòng)態(tài)加載

    理解Javascript文件動(dòng)態(tài)加載

    這篇文章主要幫助大家理解Javascript文件動(dòng)態(tài)加載，解決了Javascript文件動(dòng)態(tài)加載時(shí)出現(xiàn)的錯(cuò)誤，感興趣的小伙伴們可以參考一下
    2016-01-01
  • JavaScript實(shí)現(xiàn)異步圖像上傳功能

    JavaScript實(shí)現(xiàn)異步圖像上傳功能

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)異步圖像上傳功能,本文展示了一種使用代碼示例立即顯示圖像的方法(使用圖像的Base64編碼版本)，同時(shí)將其上載到服務(wù)器，而無(wú)需等待操作完成。需要的朋友可以參考下
    2018-07-07
  • 28個(gè)JavaScript常用字符串方法以及使用技巧總結(jié)

    28個(gè)JavaScript常用字符串方法以及使用技巧總結(jié)

    這篇文章主要給大家介紹了28個(gè)JavaScript常用字符串方法以及使用技巧的相關(guān)資料,文中統(tǒng)計(jì)的方法都非常實(shí)用,無(wú)論是日常工作還是面試,都建議多看一看,需要的朋友可以參考下
    2021-09-09

最新評(píng)論