vue中的v-touch事件用法說明

更新時間：2022年03月28日 09:50:36 作者：一只正在成長的程序猿

這篇文章主要介紹了vue中的v-touch事件用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

v-touch事件用法

1.先下載

cnpm install vue-touch@next --save dev

2.在main.js引入

import VueTouch from 'vue-touch'
Vue.use(VueTouch, { name: 'v-touch' })

3.用法

<v-touch v-on:swipeup="goRegister">
? ?<img src="../../assets/img/sign/login.png" alt="">
</v-touch>

v-touch實現(xiàn)頁面假左右切換效果

1.安裝v-touch: (vue2.0之后的要使用next分支才行，之前的使用master分支即可)

npm insall vue-touch@next --save ??

2.main.js中引入，注意：這樣打包后文件里的vendor.js會引入hammer.js(手勢檢測)

import VueTouch from 'vue-touch';
Vue.use(VueTouch, {
? name: 'v-touch'
});
VueTouch.config.swipe = {
? threshold: 10 //手指左右滑動觸發(fā)事件距離
}

3.組件中使用

<template>
? <div class="hello">
? ? <v-touch @swipeleft="swiperDirection(1)" @swiperight="swiperDirection(2)" class="v-touch wrapper" :class="transClass">
? ? ? <div class="menu-container" ref="menuContainer">
? ? ? ? {{msg}}
? ? ? </div>
? ? </v-touch>
? ? <div v-show="isLoading" class="modal-loading"><span class="loadingTxt">正在加載中...</span></div>
? </div>
</template>

<script>
? export default {
? ? name: 'HelloWorld',
? ? data() {
? ? ? return {
? ? ? ? transClass: '',
? ? ? ? isLoading: false,
? ? ? ? msg: '頁面1'
? ? ? }
? ? },
? ? methods: {
? ? ? swiperDirection: function(i) { //1向左滑2向右滑
? ? ? ? let _this = this;
? ? ? ? if (i == 1) {
? ? ? ? ? _this.transClass = 'swipe-left';
? ? ? ? } else {
? ? ? ? ? _this.transClass = 'swipe-right';
? ? ? ? }
? ? ? ? setTimeout(function() {
? ? ? ? ? _this.isLoading = true;
? ? ? ? ? _this.getInfo();
? ? ? ? }, 500); //因為動畫時間需要0.5s
? ? ? },
? ? ? getInfo() {
? ? ? ? let _this = this;
? ? ? ? _this.msg = '';
? ? ? ? //可調(diào)接口，獲取上一條/下一條數(shù)據(jù)后，再做以下操作
? ? ? ? _this.msg = '頁面2';
? ? ? ? _this.isLoading = false; //不調(diào)接口效果可能不明顯
? ? ? ? _this.transClass = '';
? ? ? }
? ? }
? }
</script>

<style scoped>　　.v-touch{　　　　touch-action: pan-y !important; //解決頁面垂直滾動失效問題　　}
? .hello,
? .wrapper,
? .menu-container,
? .modal-loading {
? ? width: 100%;
? ? height: 100%;
? }
? .wrapper {
? ? padding-top: 100px;
? ? font-size: 20px;
? ? background-color: lightcoral;
? ? color: #ffffff;
? }
? .modal-loading {
? ? position: fixed;
? ? top: 0;
? ? left: 0;
? ? color: #ffffff;
? ? background-color: rgba(1, 1, 1, 0.8);
? }
? .loadingTxt {
? ? position: absolute;
? ? top: 50%;
? ? left: 50%;
? ? transform: translate(-50%, -50%);
? }
? .swipe-left {
? ? transition: all 0.5s;
? ? transform: translateX(-100%);
? }
? .swipe-right {
? ? transition: all 0.5s;
? ? transform: translateX(100%);
? }
</style>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: