vue-touch在ios上无法上下移动的问题

爱被打了一巴掌 2022-03-07 10:49 169阅读 0赞

添加一个  
: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>

亲测，有效