vue插件v-touch的坑及解决(不能上下滑动)

: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>