taro-vue2.x跨端开发之swiper（二）

持续taro-vue框架的踩坑之路，今天说一下taro---swiper内置组件的小问题吧，首先看一下文档：(官方文档看起来有点不舒服，手动整理一下)

参数	类型	默认值	必填	说明
indicatorDots	boolean	false	否	是否显示面板指示点
indicatorColor	string	"rgba(0, 0, 0, .3)"	否	指示点颜色
indicatorActiveColor	string	"#000000"	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
currentItemId	string	""	否	当前所在滑块的 item-id ，不能与 current 被同时指定
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向
previousMargin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
nextMargin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
displayMultipleItems	number	1	否	同时显示的滑块数量
skipHiddenItemLayout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
easingFunction	"default" | "linear" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic"	"default"	否	指定 swiper 切换缓动动画类型
change（onChange）	BaseEventOrigFunction<onChangeEventDeatil>		否	current 改变时会触发 change 事件
onTransition	BaseEventOrigFunction<onTransitionEventDetail>		否	swiper-item 的位置发生改变时会触发 transition 事件
onAnimationFinish	BaseEventOrigFunction<onChangeEventDeatil>		否	动画结束时会触发 animationfinish 事件

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

有两个小问题如上文档标红所示：

1、indicatorDots 表示是否显示指示点，在代码里面设置为true，浏览器打开我们并没有看到指示点，原因是这个属性设置没有生效。。。请看下图：

如图所示我们是设置了显示指示点，但是指示点的盒子默认样式竟然是透明。。。fuck

接下来说一下swiper的动画事件，这个也是我们常用的。。。

文档标红的是onChange 事件，于是我们是不是可以直接在代码上拿来用呢？

显然是不行的，不管我们是@onChange，还是:onChange都不会生效，经过自己的反复尝试，原来是@change，事件才会生效，请看下图：这个才是我们想要的结果

<template>
  <view class="summitMeet">
      <view class="swiperBox">
        <swiper
          class='swiper'
          indicatorColor='#fff'
          indicatorActiveColor='#454545'
          :current="swiperInfo.current"
          previous-margin="28px" 
          next-margin="28px"  
          :duration="swiperInfo.duration"
          :interval="swiperInfo.interval"
          :circular="swiperInfo.isCircular"
          :autoplay="swiperInfo.isAutoplay" 
          :skipHiddenItemLayout="swiperInfo.isHiddenItemLayout"
          @change="swiperChange"
          :indicatorDots="swiperInfo.hasIndicatorDots">
          <swiper-item v-for="(item, idx) in imgUrls" :key="idx">
            <view class="imgBox">
              <image :src="item" class="slide-image" />
            </view>
          </swiper-item>
        </swiper>
      </view>
  </view>
</template>


methods: {
    swiperChange(e){
      console.log(e);
      this.current=e.detail.current
    }
  }