小程序-輪播圖/旋轉木馬效果

實現效果（基於原生組件的實現）

實現代碼：

wxml  輪播圖部分

<swiper class="swiper" circular="true" indicator-dots="true"  indicator-color="#E6E6E6" previous-margin='70rpx' next-margin="70rpx"
        indicator-active-color="#FF6315" bindchange="bindchange">
        <swiper-item class="back center " wx:for='{{imgUrls}}' wx:for-index="index">
          <view class="wrap">
            <image class="back cradBg {{swiperIndex==index?'active':'quiet'}}" src='{{baseRes}}card-bg-2.png'></image>
            <view class="txtBox">
                <view class="flag" wx:if="{{swiperIndex==index?true:false}}">臨時會員</view>
                <view class="brandLogo"><image  src="{{item.img}}"></image></view>
                <text class="plateNum">京A J234</text>
                <text class="color_ carType">寶馬x1 2018時尚款</text>
                <text class="line" wx:if="{{swiperIndex==index?true:false}}"></text>
                <text class="carShop">哈爾濱運通俊晟一汽奧迪4S店</text>
                <text class="name cardNum color_">卡號：17600090009</text>
                <text class="name color_">德瑪西亞</text>
            </view>
          </view>
        </swiper-item>
      </swiper>

　　js 輪播圖部分

const app = getApp()
Page({
  data: {
    baseRes: app.globalData.baseRes,
    imgUrls: [],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    cardNum:2,
    swiperIndex:0
  },
  bindchange:function(e){
    this.setData({
      swiperIndex:e.detail.current
    })
  },

})

css

.swiper{
    height: 674rpx;
    margin-top: 74rpx;
}
.back{
   border-radius: 10rpx;
}
.center {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 600rpx!important;
   height: 544rpx!important;
   overflow: visible;
}
/* .wrap{ position: relative; margin: 0 10rpx; } */
.text, .html{
    position: absolute;
    right: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #fff;
}
.aplyCard{
  width: 520rpx;
  height: 90rpx;
  text-align: center;
  color: #fff;
  background: #FE691F;
  line-height: 90rpx;
  font-size: 32rpx;
  margin: 228rpx auto 80rpx;
  border-radius: 50rpx;
  box-shadow: 0 2rpx 10rpx #FF6315;
}
.noCard{
  display: flex;
  flex-direction: column;align-items: center;
}
.noCard image{
 width: 198rpx;
 height: 232rpx;
 margin: 124rpx 0 0;

}
.noCard view{
  margin: 150rpx 0 32rpx;width: 248rpx;height:70rpx;
  color: #fff;
  background: #FF6315;font-size: 28rpx;
  text-align: center;
  line-height: 70rpx;
  border-radius: 10rpx;
}
.noCard text{
 color: #909090;
 font-size:22rpx;  
}

swiper .wx-swiper-dots.wx-swiper-dots-horizontal{
  margin-bottom: 2rpx;
}
swiper .wx-swiper-dot{
  width:28rpx;
  display: inline-flex;
  height: 6rpx;
  margin-left: 10rpx;
  justify-content:space-between;
}
swiper .wx-swiper-dot::before{
  content: '';
  flex-grow: 1; 
  background: #E6E6E6;
  border-radius: 8rpx
}
swiper .wx-swiper-dot-active::before{
  background:#FA832D;   
}
swiper image.cradBg{transition: all .1s;box-shadow: 0 20rpx 50rpx rgba(255,127,43,.3); margin-top:20rpx;
}
swiper image.cradBg.active{
  width: 600rpx!important;
  height: 544rpx!important;
  }
swiper image.cradBg.quiet {
 height: 500rpx;
 width: 560rpx;
}
.brandLogo image{
  width: 60rpx;
  height: 60rpx;
  border-radius: 100%;
  margin-top: 19rpx;
}
.brandLogo{
 width: 100rpx;
  height: 100rpx;
  border-radius:100%; 
  background: rgba(255,255,255,0.8);
text-align: center;
}
.txtBox{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  flex-direction: column;align-items: center;
  padding-top: 44rpx;
  box-sizing: border-box;
  color: #fff;
}
.flag{
  font-size: 16rpx;
  background: #fff;
  opacity: 0.6;
  color: #FDBC50 ;
  display: inline-block;
  position: absolute;
  right: 0;
  padding: 4rpx 14rpx; 
  top: 44rpx;
  border-radius: 20rpx 0 0 20rpx;
}
.plateNum{
  font-size: 30rpx;
  margin-top: 20rpx;
  letter-spacing: 1.6rpx;
}
.color_{
  opacity: 0.8
}
.line{
  height: 2rpx;
  width: 534rpx;
  background: rgba(255,255,255,.2);
  margin: 40rpx 0;
}
.carType{
  font-size: 22rpx;
}
.carShop{
  font-size: 30rpx;
}
.cardNum{
  margin: 22rpx 0 18rpx;
  display: block
}
.name{
  font-size: 24rpx;
}

 

詳解

swiper的屬性 解釋 （微信官方文檔）

indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色	1.1.0
indicator-active-color	Color	#000000	當前選中的指示點顏色	1.1.0
autoplay	Boolean	false	是否自動切換
current	Number	0	當前所在滑塊的 index
current-item-id	String	""	當前所在滑塊的 item-id ，不能與 current 被同時指定	1.9.0
interval	Number	5000	自動切換時間間隔
duration	Number	500	滑動動畫時長
circular	Boolean	false	是否采用銜接滑動
vertical	Boolean	false	滑動方向是否為縱向
previous-margin	String	"0px"	前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	String	"0px"	后邊距，可用於露出后一項的一小部分，接受 px 和 rpx 值	1.9.0
display-multiple-items	Number	1	同時顯示的滑塊數量	1.9.0
skip-hidden-item-layout	Boolean	false	是否跳過未顯示的滑塊布局，設為 true 可優化復雜情況下的滑動性能，但會丟失隱藏狀態滑塊的布局信息	1.9.0
bindchange	EventHandle		current 改變時會觸發 change 事件，event.detail = {current: current, source: source}
bindtransition	EventHandle		swiper-item 的位置發生改變時會觸發 transition 事件，event.detail = {dx: dx, dy: dy}	2.4.3
bindanimationfinish	EventHandle		動畫結束時會觸發 animationfinish 事件，event.detail 同上

 

樣式 解釋 此demo中,需要面板指示點，但官網的 面板指示點 是在輪播圖傷的 需要 進行一下樣式 修改  （這里的指示點 雖然在外面 但是 實際上 還是無法進行點擊的  注意）

/* 樣板指示點 樣式 */
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
     margin-bottom: 2rpx;
}
.swiper-box .wx-swiper-dot{
    width:40rpx;
    display: inline-flex;
    height: 10rpx;
    margin-left: 20rpx;
    justify-content:space-between;
}
.swiper-box .wx-swiper-dot::before{
    content: '';
    flex-grow: 1; 
    background: rgba(255,255,255,0.8);
    border-radius: 8rpx
}
.swiper-box .wx-swiper-dot-active::before{
    background:#FA832D;   
}

　　接下來就是 輪播圖樣式修改了 由於 需要做成 active的 比 其他的輪播圖 有一個放大效果 此時 需要定義兩個樣式 普通樣式 和放大的active的樣式 定一個數據swiperIndex存放當前展示的swiper的index 

當swiperIndex與index相同時 也就是說 當前模塊為active的模塊 被展示的模塊 給他添加類名 突出顯示  
<image class="back cradBg {{swiperIndex==index?'active':'quiet'}}" src='{{baseRes}}card-bg-2.png'></image>

　　並不對 swiper-item進行放大 而對里面的元素 進行樣式修改 防止 因添加類名 而引起的樣式錯亂

swiper image.cradBg.active{
  width: 600rpx!important;
  height: 544rpx!important;
  }
swiper image.cradBg.quiet {
 height: 500rpx;
 width: 560rpx;
}

　　監聽輪播圖變化

  bindchange:function(e){
　　實時監控輪播圖變化 改變swiperIndex
    this.setData({
      swiperIndex:e.detail.current
    })

　　 

  參考博客

這樣 demo就完成了