mint-ui之Swipe使用

<template>
<div>
  <div class="swipe-wrapper">
    <mt-swipe :auto="1000" ref="swipeWrapper">
      <mt-swipe-item class="swip-item-1 item">1</mt-swipe-item>
      <mt-swipe-item class="swip-item-2 item">2</mt-swipe-item>
      <mt-swipe-item class="swip-item-3 item">3</mt-swipe-item>
    </mt-swipe>
  </div>
  <div class="button-wrapper">
    <button class="prev-button flex-item" @click="prev">prev</button>
    <button class="next-button flex-item" @click="next">next</button>
  </div>
</div>
</template>

<script>
  export default {
    data() {
      return {};
    },
    methods: {
      prev: function() {
        this.$refs.swipeWrapper.prev();
        console.log(this.$children);
      },
      next: function() {
        this.$refs.swipeWrapper.next();
      }
    }
  };
</script>

<style>
  .swipe-wrapper {
    width: 100%;
    height: 300px;
  }

  .swip-item-1 {
    background: red;
  }

  .swip-item-2 {
    background: blue;
  }

  .swip-item-3 {
    background: green;
  }

  .item {
    text-align: center;
    font-size: 40px;
    color: white;
  }

  .button-wrapper {
    display: flex;
    height: 100px;
  }

  .flex-item {
    flex: 1;
    display: inline-block;
    text-align: center;
    height: 100%;
    line-height: 100%;
    font-size: 40px;
  }

  .prev-button {
    background: darkorange;
  }

  .next-button {
    background: green;
  }
</style>

转载于:https://www.cnblogs.com/zhaozhenzhen/p/8422340.html