溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序 輪播圖swiper詳解及實(shí)例（源碼下載）

發(fā)布時(shí)間：2020-10-12 08:08:51 來源：腳本之家 閱讀：417 作者：lqh 欄目：web開發(fā)

微信小程序 swiper 輪播圖

前言：

1.更新了v0.12的版本后，每次保存都彈出來一個(gè)打開文件窗口。

2.swiper組件的屬性indicator-dots，值為false時(shí)，面板指示點(diǎn)還是顯示。要把indicator-dots屬性直接刪掉。

下面進(jìn)入正題：默認(rèn)的swiper面板指示點(diǎn)都是小圓點(diǎn)黑灰的，但這滿足不了廣大小伙伴需求，比如其他顏色的，橢圓形的，方形的等等。。。。

首先當(dāng)然是要禁用掉（直接刪掉）swiper屬性indicator-dots，再用view組件模擬dots，對應(yīng)的代碼如下：

<view class="swiper-container">
 <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
  <block wx:for="{{slider}}" wx:key="unique">
   <swiper-item>
    <image src="{{item.picUrl}}" class="img"></image>
   </swiper-item>
  </block>
 </swiper>
 
 <view class="dots">
  <block wx:for="{{slider}}" wx:key="unique">
   <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
  </block>
 </view>
</view>

 然后是wxss代碼：

.swiper-container{
 position: relative;
}
.swiper-container .swiper{
 height: 300rpx;
}
.swiper-container .swiper .img{
 width: 100%;
 height: 100%;
}
.swiper-container .dots{
 position: absolute;
 left: 0;
 right: 0;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}
.swiper-container .dots .dot{
 margin: 0 8rpx;
 width: 14rpx;
 height: 14rpx;
 background: #fff;
 border-radius: 8rpx;
 transition: all .6s;
}
.swiper-container .dots .dot.active{
 width: 24rpx;
 background: #f80;
}

 再對swiper的bindchange屬性綁定對應(yīng)的事件：

Page({
data: {
  slider: [
  {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000rVobR3xG73f.jpg'},
  {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000j6Tax0WLWhD.jpg'},
  {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000a4LLK2VXxvj.jpg'},
  ......
  ],
  swiperCurrent: 0,
},
swiperChange: function(e){
  this.setData({
    swiperCurrent: e.detail.current
  })
}
})

效果預(yù)覽：

微信小程序 輪播圖swiper詳解及實(shí)例（源碼下載）

項(xiàng)目地址：http://xiazai.jb51.net/201701/yuanma/wx_qqmusic-master(jb51.net).rar

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手