bilibili小程序

使用小贴士

swiper

滑块视图容器。

属性类型默认值说明版本
indicator-dots
boolean
false
是否显示面板指示点
indicator-colorstringrgba(0, 0, 0, 0.3)指示点颜色 
indicator-active-colorstring#000000当前选中的指示点颜色 
autoplaybooleanfalse是否自动切换 
currentnumber0当前所在滑块的index 
current-item-idstring当前所在滑块的 item-id ，不能与 current 被同时指定 
intervalnumber5000自动切换时间间隔 
durationnumber500滑动动画时长 
circularbooleanfalse是否采用衔接滑动 
verticalbooleanfalse滑动方向是否为纵向 
changeeventhandlecurrent 改变时会触发 change 事件，event.detail = { current: current, source: source } 
animationfinisheventhandle动画结束时会触发 animationfinish 事件，event.detail 同上 

change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：

  • autoplay 自动播放导致swiper变化；
  • touch 用户划动引起swiper变化；
  • 其他原因将用空字符串表示。

注意：swiper中只可放置swiper-item组件，否则会导致未定义的行为。

swiper-item

仅可放置在swiper组件中，宽高自动设置为100%，bilibili小程序中，swiper-item等同于div。

属性类型默认值说明版本
item-idstring该 swiper-item 的标识符 

实例代码

<template>
  <swiper
      :current="currentIndex"
      :indicator-dots="showDots"
      :autoplay="autoplay"
      :duration="duration"
      previous-margin="30px"
      next-margin="30px"
      :interval="interval"
      @change="handleChange"
      @animationfinish="handleChange"
  >
    <swiper-item :item-id="index"
                 v-for="index in length"
                 :key="index"
                 :style="{'background': `rgb(${50 * index},${50 * index},${50 * index})`}"></swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      length: 5,
      duration: 500,
      interval: 5000,
      currentIndex: 0,
      showDots: true,
      autoplay: false
    };
  },
  methods: {
    handleChange(e) {
      console.log(e);
    }
  }
}
</script>

<style lang="less" scoped>
</style>
← scroll-viewcover-view →