Swipe

基础渲染

Slild 1

Slild 2

Slild 3

Slild 4

<template>
  <div>
    <d-swipe @click="handleClick" @change="handleChange" loop>
      <d-swipe-item >
        <div class="item-contain">
          <p class="span-item">Slild 1</p>
        </div>
      </d-swipe-item>
      <d-swipe-item >
        <div class="item-contain-dark">
          <p class="span-item">Slild 2</p>
        </div>
      </d-swipe-item>
      <d-swipe-item >
        <div class="item-contain">
          <p class="span-item">Slild 3</p>
        </div>
      </d-swipe-item>
      <d-swipe-item >
        <div class="item-contain-dark">
          <p class="span-item">Slild 4</p>
        </div>
      </d-swipe-item>
<!--      <div slot="indicator" style="position: absolute;top: 50%;left: 50%">12312</div>-->
    </d-swipe>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert('hello');
      },
      handleChange(val){
        console.log('val',val)
      }
    },
  };
</script>

<style>
.span-item{
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 184px;
  color: white;
  margin: 0;
  padding: 0;
}
.item-contain{
  width: 100%;
  height: 100%;
  background-color: #00bc9d;
}
.item-contain-dark{
  width: 100%;
  height: 100%;
  background-color: green;
}
</style>

纵向滚动

Slild 1

Slild 2

Slild 3

Slild 4

<template>
  <div>
    <d-swipe @click="handleClick" @change="handleChange" :indicatorPosition="'left'" vertical loop >
      <d-swipe-item >
        <div class="item-contain">
          <p class="span-item">Slild 1</p>
        </div>
      </d-swipe-item>
      <d-swipe-item >
        <div class="item-contain-dark">
          <p class="span-item">Slild 2</p>
        </div>
      </d-swipe-item>
      <d-swipe-item >
        <div class="item-contain">
          <p class="span-item">Slild 3</p>
        </div>
      </d-swipe-item>
      <d-swipe-item >
        <div class="item-contain-dark">
          <p class="span-item">Slild 4</p>
        </div>
      </d-swipe-item>
<!--      <div slot="indicator" style="position: absolute;top: 50%;left: 50%">12312</div>-->
    </d-swipe>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert('hello');
      },
      handleChange(val,allTotal){
        console.log('val',val,allTotal)
      }
    },
  };
</script>

<style>
.span-item{
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 184px;
  color: white;
  margin: 0;
  padding: 0;
}
.item-contain{
  width: 100%;
  height: 100%;
  background-color: #00bc9d;
}
.item-contain-dark{
  width: 100%;
  height: 100%;
  background-color: green;
}
</style>

自定义指示器

Slild 1

Slild 2

Slild 3

Slild 4

<template>
  <div>
    <d-swipe @click="handleClick" @change="handleChange" loop>
      <d-swipe-item >
        <div class="item-contain">
          <p class="span-item">Slild 1</p>
        </div>
      </d-swipe-item>
      <d-swipe-item >
        <div class="item-contain-dark">
          <p class="span-item">Slild 2</p>
        </div>
      </d-swipe-item>
      <d-swipe-item >
        <div class="item-contain">
          <p class="span-item">Slild 3</p>
        </div>
      </d-swipe-item>
      <d-swipe-item >
        <div class="item-contain-dark">
          <p class="span-item">Slild 4</p>
        </div>
      </d-swipe-item>
      <div slot="indicator" class="custom">{{ indicator }}</div>
    </d-swipe>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        indicator:''
      }
    },
    methods: {
      handleClick() {
        alert('hello');
      },
      handleChange(val,allTotal){
        this.indicator = `${val}/${allTotal}`
      }
    }
  };
</script>

<style>
.span-item{
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 184px;
  color: white;
  margin: 0;
  padding: 0;
}
.item-contain{
  width: 100%;
  height: 100%;
  background-color: #00bc9d;
}
.item-contain-dark{
  width: 100%;
  height: 100%;
  background-color: green;
}
.custom{
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 30px;
  height: 16px;
  font-size: 12px;
  border-radius: 8.5px;
  background-color: #000;
  opacity: 0.3;
  text-align: center;
  line-height: 16px;
  color: white;
}
</style>

API

属性

名称	说明	类型	默认值
autoplay	自动轮播间隔，单位为 ms	number	2800
duration	动画时长，单位为 ms	number	1400
initialSwipe	初始位置索引值	number	1
width	滑块宽度，单位为px	number | string	未完成
height	滑块高度，单位为px	number | string	未完成
loop	是否开启循环播放	boolean	false
showIndicators	是否显示指示器	boolean	true
vertical	是否为纵向滚动	boolean	false
indicatorPosition	指示器位置	left | right | top | bottom	bottom

插槽

名称	说明	参数
indicator	自定义指示器内容	无

事件

名称	说明	参数
change	页面改变时触发	名称 说明 类型 val 当前页面索引 number allPages 页面索引总数 number

贡献者

无