zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    .Net Web开发技术栈
    C#foreach原理
    C#位运算符
    python写12306抢票
    java语法学习
    建立个人知识体系
    struts2静态方法和动态方法调用
    springmvc跳转的几种方式
    JDBC驱动程序的四种方式
    eclipse用axis2发布webserver
  • 原文地址:https://www.cnblogs.com/zhaozhenzhen/p/8422340.html
Copyright © 2011-2022 走看看