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
        v-for="index in length"
        :item-id="index"
        :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 →