如何解決vue開發移動端使用better-scroll時click事件失效的問題

本篇內容主要講解“如何解決vue開發移動端使用better-scroll時click事件失效的問題”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何解決vue開發移動端使用better-scroll時click事件失效的問題”吧!

最近使用vue學習開發移動端的項目，使用了better-scroll插件做滾動。

在引入better-scroll的組件中使用@click事件的時候，點擊事件失效，v-on:click、v-bind:click、@click.native都不行，試了一下@touchstart是卻是可以的，發現better-scroll的配置中沒有設置click：true，設置過之后click事件成功。

后來在使用vuex的時候一直報

[vuex] unknown mutation type: changeCity

才發現在store文件中將mutations寫在了state里面，被自己蠢哭了。。。

正確寫法如下：

vue better-scroll的封裝以及使用

相信做一些移動端項目，很多都用了better-scroll這個滾動插件，它能讓我們頁面的滾動變得不那么僵硬，同時也能讓我們實現一些錨點等功能更簡單

注:這個插件只有當你要滾動的內容高度大于你的父盒子的高度才行

首先就npm安裝這個插件了

npm i better-scroll --save

接著我們封裝一個Better組件，這樣在全局都能復用

<template>
  <div class="wrapper" ref="wrapper" :>
   <slot></slot>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  data() {
    return {
      allHeight:''
    }
  },
  props:{
    handleToScroll:{
      type:Function,
      default:function(){}
    },
    handleToTouchEnd:{
      type:Function,
      default:function(){}
    }
  },
  methods: {
    handleToScrolltop(y){
      this.scroll.scrollTo(0,y)
    }
  },
  mounted() {
    var scroll = new BScroll(this.$refs.wrapper,{
      tap:true,
      probeType:1
    })
    this.scroll = scroll
     scroll.on('scroll',(pos)=>{
       this.handleToScroll(pos)
     })
     scroll.on('touchEnd',(pos)=>{
       this.handleToTouchEnd(pos)
     })

  let dangqian = this.$refs.wrapper.offsetTop
  let zongaodu = document.documentElement.clientHeight
  let all = zongaodu-dangqian
  this.allHeight = all +"px"
  },
}
</script>
<style>
</style>

動態綁定allHeight是為了讓父盒子的高度永遠為它到頁面最底部的高度，通過計算出來，這樣更有利于實現

同時封裝兩個方法，一個scroll是下拉刷新方法，touchEnd則是下拉刷新之后觸發的函數，也有很多其他的方法，例如上拉加載更多等等，可以去官網文檔中查看

接下來全局注冊這個組件，在main.js中

import Scroller from './components/content/Scroller'
Vue.component('Scroller',Scroller)

在其他組件使用

比如我們想讓ul標簽里面的內容有滾動效果,就可以這樣寫

 <Scroller>
 <ul>
 </ul>
</Scroller>

想用封裝的方法，通過props通信即可

<Scroller :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd">

這樣頁面就有這個滾動效果了，但是要注意，它會覆蓋我們很多的原生方法，但是他對應的也有解決方法，用它內部的屬性,我舉個例子，就比如頁面的錨點跳轉

我在封裝的組件里寫了一個方法,就是讓y軸隨著移動

  methods: {
     handleToScrolltop(y){
       this.scroll.scrollTo(0,y)
     }
   },

怎么使用呢？

在要使用的頁面通過調用這個方法

handleToScrolltop(),括號里面放上對應的offsetTop即可

到此，相信大家對“如何解決vue開發移動端使用better-scroll時click事件失效的問題”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！