vue開(kāi)發(fā)移動(dòng)端使用better-scroll時(shí)click事件失效的解

最近使用vue學(xué)習開(kāi)發(fā)移動(dòng)端的項目，使用了better-scroll插件做滾動(dòng)。

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

后來(lái)在使用vuex的時(shí)候一直報

[vuex] unknown mutation type: changeCity

才發(fā)現在store文件中將mutations寫(xiě)在了state里面，被自己蠢哭了。。。

正確寫(xiě)法如下：

vue better-scroll的封裝以及使用

相信做一些移動(dòng)端項目，很多都用了better-scroll這個(gè)滾動(dòng)插件，它能讓我們頁(yè)面的滾動(dòng)變得不那么僵硬，同時(shí)也能讓我們實(shí)現一些錨點(diǎn)等功能更簡(jiǎn)單

注:這個(gè)插件只有當你要滾動(dòng)的內容高度大于你的父盒子的高度才行

首先就npm安裝這個(gè)插件了

npm i better-scroll --save

接著(zhù)我們封裝一個(gè)Better組件，這樣在全局都能復用

<template>
  <div class="wrapper" ref="wrapper" :style="{height:allHeight}">
   <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>   

動(dòng)態(tài)綁定allHeight是為了讓父盒子的高度永遠為它到頁(yè)面最底部的高度，通過(guò)計算出來(lái)，這樣更有利于實(shí)現

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

接下來(lái)全局注冊這個(gè)組件，在main.js中

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

在其他組件使用

比如我們想讓ul標簽里面的內容有滾動(dòng)效果,就可以這樣寫(xiě)

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

想用封裝的方法，通過(guò)props通信即可

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

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

我在封裝的組件里寫(xiě)了一個(gè)方法,就是讓y軸隨著(zhù)移動(dòng)

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

怎么使用呢？

在要使用的頁(yè)面通過(guò)調用這個(gè)方法

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

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