Скопируйте переход WhatsApp между вкладками в VueJS / VuetifyJS - PullRequest
Новая
       22

Скопируйте переход WhatsApp между вкладками в VueJS / VuetifyJS

0 голосов
/ 25 мая 2018

Я использую VuetifyJS Framework для VueJS, и я хотел бы повторить переход между вкладками, который использует WhatsApp для Android.

Вы можете провести в WhatsApp влево или вправои вы увидите новый раздел while вы проводите .В VuetifyJS вы не видите содержимое вкладок until вы закончили пролистывать .Я сделал на CodePen пример того, что у меня есть: https://codepen.io/anon/pen/GdbxoL?&editors=101

Как показать содержимое вкладки при перелистывании на нее?

1 Ответ

0 голосов
/ 01 июня 2018

Вам нужно использовать директиву v-touch для захвата жеста смахивания и после того, как вы сможете выполнить метод для перехода на следующую вкладку или на предыдущую.

РЕДАКТИРОВАТЬ: Это пример использования директивы v-touch с вкладками 

<div id="app">
  <v-app id="inspire">
    <div>
      <v-tabs
        v-touch="{
        left: () => assignSwipeValue('Left'),
        right: () => assignSwipeValue('Right')
        }"
        v-model="active"
        color="cyan"
        dark
        slider-color="yellow"
      >
        <v-tab
          v-for="n in 3"
          :key="n"
          ripple
        >
          Item {{ n }}
        </v-tab>
        <v-tab-item
          v-for="n in 3"
          :key="n"
        >
          <v-card flat>
            <v-card-text>{{ text }}</v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs>

      <div class="text-xs-center mt-3">
        <v-btn @click.native="next">next tab</v-btn>
      </div>
    </div>
  </v-app>
</div>

JS 

new Vue({
  el: '#app',
  data () {

    return {
      active: null,
      text: 'Swipe Example With Tabs'
    }

  },

  methods: {
    next () {
      const active = parseInt(this.active)
      this.active = (active < 2 ? active + 1 : 0).toString()
    },

    assignSwipeValue(direction) {
      this.next()
    }
  }
})

Вы можете увидеть живое демо Здесь , но вам нужноПри открытии с мобильного устройства не удастся провести с помощью мыши.

...