vue中的v-touch事件用法說(shuō)明
更新時(shí)間：2022年03月28日 09:50:36 作者：一只正在成長(zhǎng)的程序猿
這篇文章主要介紹了vue中的v-touch事件用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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實(shí)現(xiàn)頁(yè)面假左右切換效果
1.安裝v-touch: (vue2.0之后的要使用next分支才行，之前的使用master分支即可)
npm insall vue-touch@next --save ??
2.main.js中引入，注意：這樣打包后文件里的vendor.js會(huì)引入hammer.js(手勢(shì)檢測(cè))
import VueTouch from 'vue-touch';
Vue.use(VueTouch, {
? name: 'v-touch'
});
VueTouch.config.swipe = {
? threshold: 10 //手指左右滑動(dòng)觸發(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: '頁(yè)面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); //因?yàn)閯?dòng)畫時(shí)間需要0.5s
? ? ? },
? ? ? getInfo() {
? ? ? ? let _this = this;
? ? ? ? _this.msg = '';
? ? ? ? //可調(diào)接口，獲取上一條/下一條數(shù)據(jù)后，再做以下操作
? ? ? ? _this.msg = '頁(yè)面2';
? ? ? ? _this.isLoading = false; //不調(diào)接口效果可能不明顯
? ? ? ? _this.transClass = '';
? ? ? }
? ? }
? }
</script><style scoped> .v-touch{ touch-action: pan-y !important; //解決頁(yè)面垂直滾動(dòng)失效問(wèn)題 }
? .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>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用MD5對(duì)前后端進(jìn)行加密的實(shí)現(xiàn)
前后端分離的項(xiàng)目，遇到了對(duì)密碼進(jìn)行加密的情況，在前端或者是在后端加密都是可以的，本文主要介紹了Vue使用MD5對(duì)前后端進(jìn)行加密的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue頭部導(dǎo)航動(dòng)態(tài)點(diǎn)擊處理方法
這篇文章主要介紹了vue頭部導(dǎo)航動(dòng)態(tài)點(diǎn)擊處理方法,文中通過(guò)一段示例代碼給大家介紹了vue實(shí)現(xiàn)動(dòng)態(tài)頭部的方法，需要的朋友可以參考下2018-11-11
vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
快速將Vue項(xiàng)目升級(jí)到webpack3的方法步驟
這篇文章主要給大家介紹了關(guān)于如何快速將Vue項(xiàng)目升級(jí)到webpack3的方法步驟文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
Vuejs2 + Webpack框架里,模擬下載的實(shí)例講解
今天小編就為大家分享一篇Vuejs2 + Webpack框架里,模擬下載的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Vue混入mixins滾動(dòng)觸底的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue
這篇文章主要介紹了Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue在項(xiàng)目中使用百度地圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue.js基于ElementUI封裝了CRUD的彈框組件，問(wèn)咋會(huì)給你圍繞主題展開詳細(xì)的內(nèi)容介紹，感興趣的小伙伴可以參考一下2022-07-07
vue是一種輕巧便捷的框架，那么如何進(jìn)行對(duì)于數(shù)據(jù)加載的刷新呢？以下就是我對(duì)于vue.js數(shù)據(jù)加載的一點(diǎn)想法2017-06-06