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

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

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

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

話不多說，上截圖

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,
 })
},

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

相關(guān)文章

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

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

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

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

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

    js onclick事件傳參講解

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

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

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

    javascript滾輪控制模擬滾動條

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

    mock.js模擬前后臺交互

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

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

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

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

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

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

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

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

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

最新評論