最近使用學習開發移動端的專案，使用了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這個滾動外掛，它能讓我們頁面的滾動變得不那麼僵硬，同時也能讓我們poOMEVf實現一些錨點等功能更簡單

注:這個外掛只有當你要滾動的內容高度大於你的父盒子的高度才行

首先就npm安裝這個外掛了

npm i better-scroll --save

接著我們封裝一個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>   

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

同時封裝兩個方法，一個scroll是下拉重新整理方法，touchEnd則是下拉重新整理之後觸發的函式，也有很多其他的方法，例如上拉載入更多等等，可以去官網文件中檢視

接下來全域性註冊這個元件，在main.中

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)
     }
   },

怎麼使用http://www.cppcns.com呢？

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

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

以上為個人www.cppcns.com經驗，希望能給大家一個參考，也希望大家多多支援我們。