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

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

 更新時間:2020年05月26日 11:16:21   作者:大閘蛙  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)帶放大效果的輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)帶放大效果的輪播圖,供大家參考,具體內(nèi)容如下

效果如圖

WXML

<!-- 輪播圖 -->
 <view class='Carousel'>
 <view class="recommend">
  <view class="swiper-container">
  <swiper class="swiper" autoplay="auto" interval="2000" duration="500" bindchange="swiperChange" previous-margin="40px" next-margin="40px" circular="true">
   <block wx:for="{{slider}}" wx:key="unique">
   <swiper-item data-url="{{item.linkUrl}}">
    <image class='{{swiperCurrent==item.imgId?"img_current":"img"}}' src="{{item.picUrl}}" mode="widthFix"></image>
   </swiper-item>
   </block>
  </swiper>
  <!-- 指示點(diǎn) -->
  <!-- <view class="dots">
   <block wx:for="{{slider}}" wx:key="unique">
   <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>
   </block>
  </view> -->
  </view>
 </view>
</view>

WXSS

.Carousel{
 margin-top: 49px;
 background-color: #fff;
}
.swiper-container{
 position: relative;
}
.swiper-container .swiper{
 padding-top: 8px;
 height: 380rpx;
 text-align: center;
}
swiper-item{
 display: flex;
 align-items: center;
 justify-content: space-around;
}
.swiper-container .swiper .img{
 width: 88%;
 height: 88%;
 border-radius: 10px;
}
.img_current{
 width: 100%;
 height: 100%;
 border-radius: 10px;
}
.swiper-container .dots{
 position: absolute;
 right: 40rpx;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}
.swiper-container .dots .dot{
 width: 28rpx;
 height: 28rpx;
 margin: 0 10rpx;
 border-radius: 50%;
 background: #fff;
 transition: all .6s;
 font: 300 18rpx/28rpx "microsoft yahei";
 text-align: center;
}
.swiper-container .dots .dot.active{
 background: #f80;
 color:#fff;
}

JS

data: { 
 //輪播圖
 slider: [
  { imgId: '0', linkUrl: 1, picUrl: '/images/swiper/swiper_1.png' },
  { imgId: '1', linkUrl: 2, picUrl: '/images/swiper/swiper_2.png' }, 
  { imgId: '2', linkUrl: 3, picUrl: '/images/swiper/swiper_3.png' },
  ],
 swiperCurrent: 0,
 }
 
  /**
 * 輪播圖
 */
 swiperChange: function (e) {
 //把切換后當(dāng)前的index傳給<swiper>組件的current屬性
 this.setData({
  swiperCurrent: e.detail.current
 })
 },

 //點(diǎn)擊指示點(diǎn)切換
 // chuangEvent: function (e) {
 // this.setData({
 //  swiperCurrent: e.currentTarget.id
 // })
 // },

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。

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

相關(guān)文章

  • TypeScript 中括號用法小結(jié)

    TypeScript 中括號用法小結(jié)

    本文主要介紹了TypeScript 中括號用法小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • 原生js編寫2048小游戲

    原生js編寫2048小游戲

    本文主要介紹了用原生js編寫2048小游戲的示例代碼,具有很好的參考價值,下面跟著小編一起來看下吧
    2017-03-03
  • 微信小程序自定義tabBar的步驟記錄

    微信小程序自定義tabBar的步驟記錄

    微信小程序開發(fā)越來越多樣化,各種豐富的設(shè)計及體驗(yàn),自定義tabBar也經(jīng)常使用,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何自定義tabBar的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • 解決LayUI表單獲取不到data的問題

    解決LayUI表單獲取不到data的問題

    今天小編就為大家分享一篇解決LayUI表單獲取不到data的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ES6

    跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ES6

    跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ECMAScript 6,ES6(ECMAScript 6)是即將到來的新版本JavaScript語言的標(biāo)準(zhǔn),代號harmony,感興趣的小伙伴們可以參考一下
    2015-11-11
  • electron獲取位置坐標(biāo)信息的方法小結(jié)

    electron獲取位置坐標(biāo)信息的方法小結(jié)

    這篇文章給大家詳細(xì)介紹了electron 如何獲取位置坐標(biāo)信息,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2024-02-02
  • wap手機(jī)端解決返回上一頁的js實(shí)例

    wap手機(jī)端解決返回上一頁的js實(shí)例

    下面小編就為大家?guī)硪黄獁ap手機(jī)端解決返回上一頁的js實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-12-12
  • 微信小程序使用setData修改數(shù)組中單個對象的方法分析

    微信小程序使用setData修改數(shù)組中單個對象的方法分析

    這篇文章主要介紹了微信小程序使用setData修改數(shù)組中單個對象的方法,結(jié)合具體實(shí)例形式分析了setData進(jìn)行數(shù)組修改的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
    2018-12-12
  • javascript實(shí)現(xiàn)延時顯示提示框特效代碼

    javascript實(shí)現(xiàn)延時顯示提示框特效代碼

    本文給大家分享的是javascript通過setTimeout實(shí)現(xiàn)延時顯示提示框的特效代碼,效果非常棒,這里推薦給大家
    2016-04-04
  • VSCode開發(fā)TypeScript的實(shí)現(xiàn)步驟

    VSCode開發(fā)TypeScript的實(shí)現(xiàn)步驟

    本文主要介紹了VSCode開發(fā)TypeScript的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02

最新評論