【小程序】小程序swper組件輪播圖實現不同效果間距

swiper組件實現出間距輪播

先不急着看實現過程，先看看三種效果圖，如果是你想要的效果那請看下面的過程，不是的話也不浪費大家的時間（就是這麼體貼唉）。

效果圖一 利用css

效果圖二 利用css 實現中間

效果圖三 利用css 和 js實現兩邊小 中間大

如果有你想要的效果，那就繼續往下看，沒有那就出門右（別）拐（走）吧。

一開始想着如果和swiper.js一樣，那就好了，看了下文檔就放棄了。網上找了一下還是沒找到具體實現方法，就開始自己倒騰，就想到幾個辦法，看客們講究着試試吧。

第一種效果 普通的間隔輪播

1:wxml

<view class='test'>
    <swiper  display-multiple-items='1'>    // 這裏是設置顯示一張
      <block wx:for="{{imgUrls}}">             // 遍歷js中的圖片
        <swiper-item>									// box外層swiper
          <view class='box'>						// 重點處理box
            <image src='{{item}}'></image>
            <view class='content'>
              <text>測試</text>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
</view>

2:wxss

.test{
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}
swiper{
  height: 100%;
}
.content{
  font-size: 16px;
  color: #333;
  padding: 20rpx 40rpx;
}
swiper-item{							// 此時的swiper-item是佔據一個頁面的
  text-align: center;				   // 讓其中的內容居中顯示
}
swiper-item image{
  width: 100%;
}
.box{								// box設置寬高（更具設計稿自定義吧）
  width: 80%;
  height: 700rpx;
  display: inline-block;
  margin-top: 40px;
  box-sizing: border-box;
  box-shadow: 0 0 4px 4px #f2f2f2;  // 給box添加陰影效果更顯著
}

這種實現是利用css來間接達到輪播間距的效果:

• swiper利用display-multiple-items='1’屬性 一次展示一張
• swiper-item添加內容居中
• 內容設置寬高
• 最後就可以得到一次一張且有間距的輪播圖

第二種效果 帶邊界的間隔輪播

依舊按照上面的css不用大改,改已改box的寬度即可，按照你想要的效果去設置大小。

.box{
  width: 90%;
  }

只需要在swiper組件上加兩個屬性，來達到預留空間給裏面box。在加上circular屬性銜接滑動（無縫連接）。

第三種效果 兩邊小中間大動畫輪播

1:wxml

<view class='test'>
    <swiper  display-multiple-items='1' circular previous-margin='50px' next-margin='50px' bindchange='change' current='{{current}}'>
      <block wx:for="{{imgUrls}}" wx:key='{{index}}'>
        <swiper-item>
          <view class="box" data-index='{{index}}' animation="{{index == current?animationData:animationData2}}">
            <image src='{{item}}'></image>
            <view class='content'>
              <text>測試</text>
              <text>測試</text>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
</view>

2:wxss

.test{
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}
swiper{
  height: 100%;
}
.content{
  font-size: 16px;
  color: #333;
  padding: 20rpx 40rpx;
}
swiper-item{
  text-align: center;
}
swiper-item image{
  width: 100%;
}
.box{
  width: 90%;
  height:600rpx;
  display: inline-block;
  margin-top: 40px;
  box-sizing: border-box;
  box-shadow: 0 0 4px 4px #f2f2f2;
  position:relative;
  top:33%;
  transform:translateY(-45%);
}

3.js 利用animate來過渡動畫，當下標相同的額時候執行放大的動畫

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    current: 0,
    animationData: {},
    animationData2: {}
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.stretch(350)
  },
  change(e){
    this.setData({
      current: e.detail.current
    })
    this.stretch(350)
    
    this.shrink(300)
  },
  // 收縮
  stretch(h){
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })
    this.animation = animation
    animation.height(h).step()
    this.setData({
      animationData: animation.export(),
    })
  },
  // 展開
  shrink(h){
    var animation2 = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })
    this.animation2 = animation2
    animation2.height(h).step()
    this.setData({
      animationData2: animation2.export()
    })
  },
})

以上就是三種輪播實現的方式，如果有疑問的可以下面留言，或者你有更好的方法，可以留言，郵箱發送