亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2022年03月28日 11:00:06   作者:西涼嘎嘎  
這篇文章主要介紹了vue插件v-touch的坑及解決(不能上下滑動(dòng)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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同一瀏覽器登錄多賬號(hào)處理方案

    vue同一瀏覽器登錄多賬號(hào)處理方案

    項(xiàng)目在線上會(huì)遇到管理員類似權(quán)限比較大的用戶,會(huì)在同一瀏覽器登陸多個(gè)賬號(hào),遇到這樣的問題如何處理呢,下面小編給大家介紹vue同一瀏覽器登錄多賬號(hào)處理方法,感興趣的朋友一起看看吧
    2024-01-01
  • vue3+vite+ts父子組件之間的傳值

    vue3+vite+ts父子組件之間的傳值

    隨著vue2的落幕,vue3越來成熟,有必要更新一下vue3的父子組件之間的傳值方式,這里介紹下vue3+vite+ts父子組件之間的傳值方式實(shí)例詳解,感興趣的朋友一起看看吧
    2023-12-12
  • vue引入element-ui之后,頁(yè)面是空白的問題及解決

    vue引入element-ui之后,頁(yè)面是空白的問題及解決

    這篇文章主要介紹了vue引入element-ui之后,頁(yè)面是空白的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié)篇

    vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié)篇

    vue-router 是 Vue.js 官方的路由庫(kù).這篇文章主要介紹了vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié),需要的朋友可以參考下
    2018-02-02
  • webstorm和.vue中es6語法報(bào)錯(cuò)的解決方法

    webstorm和.vue中es6語法報(bào)錯(cuò)的解決方法

    本篇文章主要介紹了webstorm和.vue中es6語法報(bào)錯(cuò)的解決方法,小編總結(jié)了webstorm和.vue中出現(xiàn)的es6語法報(bào)錯(cuò),避免大家采坑,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-05-05
  • 關(guān)于vue表單提交防雙/多擊的例子

    關(guān)于vue表單提交防雙/多擊的例子

    今天小編就為大家分享一篇關(guān)于vue表單提交防雙/多擊的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • vue?history模式刷新404原因及解決方法

    vue?history模式刷新404原因及解決方法

    vue路由的URL有兩種模式,一種是?hash,一種是history,下面這篇文章主要給大家介紹了關(guān)于vue?history模式刷新404原因及解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • 詳解vue項(xiàng)目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程

    詳解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
  • 使用Vue封裝一個(gè)前端通用右鍵菜單組件

    使用Vue封裝一個(gè)前端通用右鍵菜單組件

    這篇文章主要為大家詳細(xì)介紹了如何使用Vue封裝一個(gè)前端通用右鍵菜單組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-02-02
  • vue3.0中setup的兩種用法實(shí)例

    vue3.0中setup的兩種用法實(shí)例

    setup函數(shù)是一個(gè)新的組件選項(xiàng),作為在組件內(nèi)使用Composition Api的入口點(diǎn),下面這篇文章主要給大家介紹了關(guān)于vue3.0中setup的兩種用法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09

最新評(píng)論