vue插件v-touch的坑及解决(不能上下滑动)
时间：2023-01-25 10:06:57|栏目：vue|点击： 次
v-touch的坑不能上下滑动
用法
1.下载
2.在main.js中引入
3. 使用
vue-touch的坑
1.使用vue-touch监听左右滑动之后,不能进行上下滑动
①原因：
②解决方法：
2.手机端测试时发现滑动不灵敏问题
①原因：
<v-touch></v-touch>标签被撑开的高度不够，只能在被撑开的高度中进行滑动。发现有些页面可以灵敏滑动，有些不可以的时候，应该去检查下当前页面内容被撑开的高度。
②解决方法：
给父元素加padding-bottom等撑开<v-touch></v-touch>标签高度占满整个手机屏幕即可。
vue-touch在ios上无法上下移动
添加一个
: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() {},
// 获取首页列表
goodsElect() {
this.$api.goods_elective({}).then(res => {
let params = res.data;
this.forseterlist = params.goods_info;
});
},
// 加入购物车
addCart(item) {
this.goodsItem = item;
this.goods_id = Number(item.goods_id);
console.log("加入购车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>
