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}
bindanimationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail 同上	1.9.0

以上是swiper组件的api,我今天写的是一个类似于淘票票那种里面选择电影的切换功能，功能效果图如下

切换过程中，swiper-item定位到中间，这就需要我们好好利用一下display-multiple-items，next-margin，previous-margin这三个属性了

display-multiple-items：主要设置同时滑动过程中可见滑块数量（设置几个看UI设计了）

previous-margin和next-margin就是设置滑块前后边距问题了（具体大家自己调）

 

注意：

有一个地方需要注意，就是这几个属性支持的版本（调试基础库是1.9.0以上），我开始默认新建一个小程序基础库是1.6.6，用这几个属性一直没有效果，急死了，最后发现基础库没有调

调试基础库可以在开发工具里面右上角详情里面，选择调试基础库的版本

 

最后附上我的源码，仅供参考，感觉垃圾勿喷

wxml:

<view class='switcher'>
   <view class='triangle'></view>

    <swiper bindchange="handelSwpierChange" class='swiper' display-multiple-items="3" previous-margin="70rpx" current="{{index}}" next-margin="70rpx" current="{{activeindex}}">

<!--空标签-->
    <block>
        <swiper-item class="swiper-item"></swiper-item>
    </block>

    <block wx:for="{{changeImgs}}" wx:key="*this">
        <swiper-item class="swiper-item">
            <view class="img-item {{activeindex == index?'img-item-current':''}}">
                <image src='{{item}}'/>
            </view>
        </swiper-item>
    </block>

    <!--空标签-->
    <block>
        <swiper-item class="swiper-item"></swiper-item>
    </block>

</swiper>

//背景图（高斯模糊图）
<image src="{{imgUrl}}" style="width:100%;height:320rpx;" class="backImg"></image>

</view>

wxss:

.switcher{
  position: relative;
  height: 320rpx;
  margin-top:16rpx;
  overflow: hidden;
}
.backImg{
  position: absolute;
  left: 0;
  top: 0;
  z-index: -10;
  filter: blur(10px);
  -webkit-filter: blur(10px);
}
.triangle{
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  border: 20rpx solid #F0F0F0;
  margin-left: -20rpx;
  transform: rotate(45deg);
  margin-top:-25rpx;
}
.swiper{
  height:320rpx!important;
}

.swiper-item{
  text-align: center;
}

.img-item {
  display: inline-block;
  border-bottom: none;
  width: 140rpx;
  height: 196rpx;
  position: relative;
  z-index: 1000;
  margin: 94rpx 0 0;
}
.img-item-current{
  margin-top: 20rpx; 
  height: 279rpx;
  width: 200rpx; 
  border: 3rpx #FF4E4E solid; 
  top: 10rpx; 
}
.img-item image{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

js:

Page({

  data: {
    changeImgs: [
      '../../images/a1.jpg',
      '../../images/a2.jpg',
      '../../images/a3.jpg',
      '../../images/a4.jpg',
      '../../images/a5.jpg',
      '../../images/a6.jpg',
      '../../images/a7.jpg',
      '../../images/a8.jpg',
    ],
    imgUrl: '../../images/a1.jpg',
    activeindex:0,
  },

  onLoad: function (options) {
  },

  onReady: function () {
    
  },

  onShow: function () {
    
  },

  // current改变
  handelSwpierChange: function (e) {
    this.setData({
      activeindex: e.detail.current,
      imgUrl: this.data.changeImgs[e.detail.current]
    })
  }
})