第一種
重點：不要用scroll-view
效果

main.json

{
  "navigationBarTitleText": "",
  "enablePullDownRefresh": true,//開啟下拉重新整理
  "backgroundTextStyle":"drak",//顯示重新整理三個點
  "backgroundColor": "#fff"
}

js

  onPullDownRefresh() {
    // 下拉重新整理
    .....
  },
  onReachBottom() {
    // 上拉載入更多
   .....
  },

第二種 使用scroll-view的前提下，可自定義樣式

<scroll-view  scroll-y="true"
                  style="height: 100%"
                  @scroll="getScroll"
                 >

2 將滾動高度註冊到data

  getScroll(e) {
      this.scrollTop = e.target.scrollTop
    },

3watch監聽2所註冊的滾動值，當滿足滾動高度，也就是符合下拉條件時，顯示自定義下拉樣式元件

  watch: {
    scrollTop(curVal, oldVal) {
      if (this.scrollTop < -100) {
        this.init()
        this.loadShow = true
      }
    }
  },
 

4自定義下拉元件，用c3實現旋轉載入效果

<template>
  <div  class="static-div row-center">
    <img  class="lordingImg" src="../imger/icon/loading.png">
  </div>
</template>

<script>
  export default {
    name: 'refreshLoading',
    data() {
      return {
      }
    },
    method: {
    }
  }
</script>

<style scoped>
  .static-div{
    height: 200rpx;
    width: 100%;
    top: 0;
    background: rgba(247,247,247,1);
  }
  .lordingImg{
    height: 100rpx;
    width: 100rpx;
    animation: rotate 1s linear infinite;
  }
  @keyframes rotate{
    from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
  }
</style>

 

5當更新事件完成關閉自定義下拉元件

this.loadShow = false