滑块视图容器

swiper

滑块视图容器。

swiper-item

仅可放置在<swiper/>组件中，宽高自动设置为100%。

属性名	类型	默认值	说明	最低版本
item-id	String	""	该 swiper-item 的标识符	1.9.0

在swiper里需要存放的是它的组件swiper-item。下面的例子实现了一个页面一道题，通过滑动到下一题：

（paperdetails 是通过接口后台传来的数据）

<swiper duration="1500" bindchange="change" current='{{currentid}}' wx:if="{{show_swiper}}" >  
     <swiper-item wx:for="{{paperdetails}}" >
       <text class='con'>{{item.content}}</text>
       <radio-group data-id="{{item.id}}" bindchange="radioChange" bindtap="next">
         <label class='item'>
           <radio value='a#{{item.scorea}}'>A.{{item.itema}}</radio>
         </label>
         <label class='item'>
           <radio value='b#{{item.scoreb}}'>B.{{item.itemb}}</radio>
         </label>
         <label class='item'>
           <radio value='c#{{item.scorec}}'>C.{{item.itemc}}</radio>
         </label>
         <label class='item'>
           <radio value='d#{{item.scored}}'>D.{{item.itemd}}</radio>
         </label>
       </radio-group>
     </swiper-item>
  </swiper> 

这里面用到了swiper 的属性：

duration：滑动动画时长      current：当前所在滑块的 index   bindchange：绑定的事件change  

下面有它的更多属性介绍。

下面是他的部分js代码

change: function(e){
    console.log(e);
    if(e.detail.source == 'touch'){
      this.setData({currentid:e.detail.current});
    }

radioChange: function(e){ //获取单选按钮选的值
    var id = e.currentTarget.dataset.id;
    var value = e.detail.value;
    var arr = value.split('#');
    // console.log(arr)
    var _answer = this.data.answer;
    _answer[id] = arr[0];
    this.setData({ answer:_answer });
    var _score = this.data.score;
    _score[id] = arr[1];
    this.setData({ score: _score });

  //计算json里面值的个数
  var len = 0;
  for(var i in _answer){
    len++;
  }
  if(len<this.data.count){
    this.setData({ btn_disabled:true});
  }else{
    this.setData({ btn_disabled:false});
  }

下面是它的一些属性：

属性名	类型	默认值	说明	最低版本
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