vue原生js實現下拉刷新(阻尼滑動效果)

1、定義基礎屬性：

scroll_load: {
        top: 0,
        startY: 0,
        touching: false,
        state: 0,
        scrolltop: true,
},

2、加上監聽:

vue自帶的標簽屬性：

@touchstart="touchStart($event)"

@touchmove="touchMove($event)"

@touchend="touchEnd($event)"

3、綁定你需要實現阻尼滑動的dom元素的樣式：

為了實現阻尼效果，我們可以根據手指下滑的距離來動態設置元素的padding-top值，讓它實現向下滑動。

vue動態綁定樣式的方法:(注:帶有-的屬性，如：padding-top，需要改變為駝峰命名方式如：paddingTop)

v-bind:style="{ paddingTop: scrollerheight }"

(注：scrollerheight 不能定義在data中，需要通過compute訪問)

scrollerheight: function scrollerheight() {
　　return this.scroll_load.top.toString() + 'px';
}

4、js部分：

注：下面的state對應了三個狀態（1：滑動狀態, 2：到達閥值狀態 , 3：正在刷新）和一個初始狀態，如何運用這三個狀態去實現你想要的效果就各憑本事了

touchStart: function touchStart(e) {
　　　　// e代表該事件對象，e.targetTouches[0].pageY可以拿到手指        按下的 y軸點
　　　　 this.scroll_load.startY = e.targetTouches[0].pageY;
　　　　// 開啟下拉刷新狀態
　　　　 this.scroll_load.touching = true;
        this.scroll_load.state = 1;
        console.log('touchStart');
},
touchMove: function touchMove(e) {
        　 //這個 touchMove，只要頁面在動都會發生的，所以 touching就起作用了
        　// 如果 touching為false，說明這個正在移動的頁面不是我們想要的下拉刷新，有可能是用戶隨意拉了一下頁面而已，或者其他
        　if(!this.scroll_load.touching) return;
        　// 獲取移動的距離
        　var diff = e.targetTouches[0].pageY - this.scroll_load.startY;
        
        　//判斷是向上拉還是向下拉 
        　if(diff >0) { 
        　　　e.preventDefault();
        　} else {
        　　　return;
        　}
        　//這個this.top要對應綁定到該元素的transform: translateY(+top+ 'px')上，不然是無法拉動的
        　// 因此這里還要對偏移高度做一下處理，直接設置diff +(this.state === 2 ? 40 : 0) 太快了，因為拉取幅度太大
        　// 讓diff*0.25這樣子就差不多了
        　this.scroll_load.top = Math.floor(diff*0.25);
        　if(this.scroll_load.top >= 40){
        　　　this.scroll_load.state = 2;   //釋放刷新。。。。。。2
              this.scroll_load.top = 40;
        　} else {
        　　　this.scroll_load.state = 1;  // 開始滑動。。。。。。1
        　}　　　
},
touchEnd: function touchEnd(e) {
        　this.scroll_load.touching = false;
        　if(this.scroll_load.state === 4) {
        　　　return; 
        　}
        　// 判斷抬起時的高度，是大於40 就開啟刷新
        　if(this.scroll_load.top >= 40) {
        　　　this.refresh();
        　} else {
        　　　this.scroll_load.state = 0;
              this.scroll_load.top = 0;
        　}
        console.log("touchEnd")
        },
      refresh: function refresh(){
        console.log("refresh");
        var that = this;
        this.scroll_load.state = 3; // 正在刷新。。。。。。3
        // 在這下面實現你要的刷新方法，查詢數據，記得將top、state重置為0
      }
},