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

更新時間：2022年03月28日 11:00:06 作者：西涼嘎嘎

這篇文章主要介紹了vue插件v-touch的坑及解決(不能上下滑動)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

v-touch的坑不能上下滑動

用法

1.下載

2.在main.js中引入

3. 使用

vue-touch的坑

1.使用vue-touch監(jiān)聽左右滑動之后,不能進行上下滑動

①原因：

②解決方法：

2.手機端測試時發(fā)現(xiàn)滑動不靈敏問題

①原因：

<v-touch></v-touch>標簽被撐開的高度不夠，只能在被撐開的高度中進行滑動。發(fā)現(xiàn)有些頁面可以靈敏滑動，有些不可以的時候，應該去檢查下當前頁面內(nèi)容被撐開的高度。

②解決方法：

給父元素加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>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: