bugfix> javascript > 投稿

私は使用していますVuetifyJSフレームワーク VueJSの場合、WhatsApp for Androidが使用するタブ間のスワイプを複製したいと思います。

WhatsAppを左または右にスワイプすると、新しいセクションが表示されます while スワイプする。 VuetifyJSでは、タブのコンテンツは表示されません until スワイプを終了しました。 これまでのCodePenの例を作成しました。 https://codepen.io/anon/pen/GdbxoL?&editors=101

タブの内容を表示する方法ながら それにスワイプ?

回答 1 件
  • を使用する必要があります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()
        }
      }
    })
    
    

    ここでライブデモを見ることができますが、モバイルデバイスから開く必要があります。マウスでのスワイプは機能しません。

あなたの答え