vue插件v-touch的坑及解決(不能上下滑動(dòng))
v-touch的坑不能上下滑動(dòng)
用法
1.下載
2.在main.js中引入
3. 使用
vue-touch的坑
1.使用vue-touch監(jiān)聽左右滑動(dòng)之后,不能進(jìn)行上下滑動(dòng)
①原因:
②解決方法:
2.手機(jī)端測(cè)試時(shí)發(fā)現(xiàn)滑動(dòng)不靈敏問題
①原因:
<v-touch></v-touch>標(biāo)簽被撐開的高度不夠,只能在被撐開的高度中進(jìn)行滑動(dòng)。發(fā)現(xiàn)有些頁(yè)面可以靈敏滑動(dòng),有些不可以的時(shí)候,應(yīng)該去檢查下當(dāng)前頁(yè)面內(nèi)容被撐開的高度。
②解決方法:
給父元素加padding-bottom等撐開<v-touch></v-touch>標(biāo)簽高度占滿整個(gè)手機(jī)屏幕即可。
vue-touch在ios上無法上下移動(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)物車 addCart(item) { this.goodsItem = item; this.goods_id = Number(item.goods_id); console.log("加入購(gòu)車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引入element-ui之后,頁(yè)面是空白的問題及解決
這篇文章主要介紹了vue引入element-ui之后,頁(yè)面是空白的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié)篇
vue-router 是 Vue.js 官方的路由庫(kù).這篇文章主要介紹了vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié),需要的朋友可以參考下2018-02-02webstorm和.vue中es6語法報(bào)錯(cuò)的解決方法
本篇文章主要介紹了webstorm和.vue中es6語法報(bào)錯(cuò)的解決方法,小編總結(jié)了webstorm和.vue中出現(xiàn)的es6語法報(bào)錯(cuò),避免大家采坑,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05詳解vue項(xiàng)目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程
這篇文章主要介紹了將vue的項(xiàng)目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程,主要運(yùn)用的技術(shù)是vue+express+git+百度的應(yīng)用引擎BAE。需要的朋友可以參考下2018-03-03