vue插件v-touch的坑及解決(不能上下滑動(dòng))
v-touch的坑不能上下滑動(dòng)
用法
1.下載

2.在main.js中引入

3. 使用

vue-touch的坑
1.使用vue-touch監(jiān)聽(tīng)左右滑動(dòng)之后,不能進(jìn)行上下滑動(dòng)
①原因:

②解決方法:

2.手機(jī)端測(cè)試時(shí)發(fā)現(xiàn)滑動(dòng)不靈敏問(wèn)題
①原因:
<v-touch></v-touch>標(biāo)簽被撐開(kāi)的高度不夠,只能在被撐開(kāi)的高度中進(jìn)行滑動(dòng)。發(fā)現(xiàn)有些頁(yè)面可以靈敏滑動(dòng),有些不可以的時(shí)候,應(yīng)該去檢查下當(dāng)前頁(yè)面內(nèi)容被撐開(kāi)的高度。
②解決方法:
給父元素加padding-bottom等撐開(kāi)<v-touch></v-touch>標(biāo)簽高度占滿整個(gè)手機(jī)屏幕即可。
vue-touch在ios上無(wú)法上下移動(dòng)
添加一個(gè)
:swipe-options="{direction: 'horizontal'}"<template>
<div class="experts-wrapp iosScroll">
<div class="experts-content">
<new-gifts></new-gifts>
<v-touch
v-on:swipeleft="swiperleft"
v-on:swiperight="swiperright"
:swipe-options="{direction: 'horizontal'}"
>
<experts-list :forseterlist="forseterlist" @on-addCart="addCart"></experts-list>
<group-booking></group-booking>
</v-touch>
</div>
<add-cart ref="addCart" :goodsItem="goodsItem"></add-cart>
</div>
</template>
<script>
import NewGifts from "./newgift";
import ExpertsList from "./expertslist";
import GroupBooking from "./groupBooking";
import addCart from "@/common/addCart";
export default {
data() {
return {
forseterlist: [],
goods_id: null,
goodsInfo: [],
goodsItem: null
};
},
components: {
NewGifts,
ExpertsList,
GroupBooking,
addCart
},
mounted() {
this.goodsElect();
},
watch: {},
methods: {
swiperleft() {
this.$emit("swiperleft");
},
swiperright() {},
// 獲取首頁(yè)列表
goodsElect() {
this.$api.goods_elective({}).then(res => {
let params = res.data;
this.forseterlist = params.goods_info;
});
},
// 加入購(gòu)物車(chē)
addCart(item) {
this.goodsItem = item;
this.goods_id = Number(item.goods_id);
console.log("加入購(gòu)車(chē)222222");
this.$refs.addCart.show = true;
this.$bus.$emit("changeMeta", {
hasTab: false
});
}
}
};
</script>
<style lang="stylus" scoped>
.experts-wrapp {
position: fixed;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 100%;
padding: 100px 0px 50px 0;
margin: 0 auto;
overflow-y: auto;
}
.experts-content {
width: 100%;
margin: 0 auto;
height: 100%;
padding: 10px 0;
}
</style>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-router的鉤子函數(shù)用法實(shí)例分析
這篇文章主要介紹了vue-router的鉤子函數(shù)用法,結(jié)合實(shí)例形式分析了vue路由鉤子分類(lèi)及vue-router鉤子函數(shù)相關(guān)使用技巧,需要的朋友可以參考下2019-10-10
Vue中使用JsonView來(lái)展示Json樹(shù)的實(shí)例代碼
這篇文章主要介紹了Vue之使用JsonView來(lái)展示Json樹(shù)的實(shí)例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11
vue中el-table單元格復(fù)制功能實(shí)現(xiàn)
這篇文章主要介紹了vue中el-table單元格復(fù)制功能實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
Vue?Router修改query參數(shù)url參數(shù)沒(méi)有變化問(wèn)題及解決
這篇文章主要介紹了Vue?Router修改query參數(shù)url參數(shù)沒(méi)有變化問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
使用 vue.js 構(gòu)建大型單頁(yè)應(yīng)用
本文給大家詳細(xì)介紹了如何使用使用 vue.js腳手架工具vue-cli構(gòu)建大型單頁(yè)應(yīng)用的方法,非常的實(shí)用,有需要的小伙伴可以參考下2018-02-02
Vue聲明式導(dǎo)航與編程式導(dǎo)航及導(dǎo)航守衛(wèi)和axios攔截器全面詳細(xì)講解
這篇文章主要介紹了Vue聲明式導(dǎo)航與編程式導(dǎo)航及導(dǎo)航守衛(wèi)和axios攔截器,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
Vue3+Vite+TS實(shí)現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga
這篇文章主要介紹了在Vue3+Vite+TS的基礎(chǔ)上實(shí)現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga,下面文章也將圍繞實(shí)現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga的相關(guān)介紹展開(kāi)相關(guān)內(nèi)容,具有一定的參考價(jià)值,需要的小伙伴可惡意參考一下2021-12-12
vue中使用scrollTo沒(méi)有效果的完美解決方法
這篇文章主要介紹了在vue中使用scrollTo沒(méi)有效果的解決方法,本文給大家分享具體操作步驟,在這里需要注意scrollTo要作用在可滾動(dòng)的元素上,不然不生效,scrollTop就會(huì)一直為0,需要的朋友可以參考下2023-10-10
vue/react項(xiàng)目刷新頁(yè)面出現(xiàn)404報(bào)錯(cuò)的原因及解決辦法
Vue項(xiàng)目打包部署到線上后,刷新頁(yè)面會(huì)提示404,下面這篇文章主要給大家介紹了關(guān)于vue/react項(xiàng)目刷新頁(yè)面出現(xiàn)404報(bào)錯(cuò)的原因及解決辦法,文中將解決的辦法介紹的很詳細(xì),需要的朋友可以參考下2023-05-05

