vue2.0 移动端，下拉刷新，上拉加载更多插件，修改版

Posted 2020-09-28 问路-A

在【实现丰盛】的插件基础修改【vue2.0 移动端，下拉刷新，上拉加载更多 插件】，

1.修改加载到尾页面，返回顶部刷新数据，无法继续加重下一页

2.修改加载完成文字提示

原文链接：http://www.cnblogs.com/sichaoyun/p/6647458.html 

 

<template lang="html">
  <div class="yo-scroll"
  :class="{\'down\':(state===0),\'up\':(state==1),refresh:(state===2),touch:touching}"
  @touchstart="touchStart($event)"
  @touchmove="touchMove($event)"
  @touchend="touchEnd($event)"
  @scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
    <section class="inner" :style="{ transform: \'translate3d(0, \' + top + \'px, 0)\' }">
      <header class="pull-refresh">
        <slot name="pull-refresh">
           <span class="down-tip">下拉更新</span>
           <span class="up-tip">松开更新</span>
           <span class="refresh-tip">更新中……</span>
        </slot>
      </header>
      <slot></slot>
      <footer class="load-more">
        <slot name="load-more">
          <span>{{loadingText}}</span>
        </slot>
      </footer>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    offset: {
      type: Number,
      default: 40
    },
    loadingText: {
      type: String,
      default: \'加载中...\'
    },
    enableInfinite: {
      type: Boolean,
      default: true
    },
    enableRefresh: {
      type: Boolean,
      default: true
    },
    onRefresh: {
      type: Function,
      default: undefined,
      required: false
    },
    onInfinite: {
      type: Function,
      default: undefined,
      require: false
    }
  },
  data() {
    return {
      top: 0,
      state: 0,
      startY: 0,
      touching: false,
      infiniteLoading: false
    }
  },
  methods: {
    touchStart(e) {
      this.startY = e.targetTouches[0].pageY
      this.startScroll = this.$el.scrollTop || 0
      this.touching = true
    },
    touchMove(e) {
      if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
        return
      }
      let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
      if (diff > 0) e.preventDefault()
      this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)

      if (this.state === 2) { // in refreshing
        return
      }
      if (this.top >= this.offset) {
        this.state = 1
      } else {
        this.state = 0
      }
    },
    touchEnd(e) {
      if (!this.enableRefresh) return
      this.touching = false
      if (this.state === 2) { // in refreshing
        this.state = 2
        this.top = this.offset
        return
      }
      if (this.top >= this.offset) { // do refresh
        this.refresh()
      } else { // cancel refresh
        this.state = 0
        this.top = 0
      }
    },
    refresh() {
      this.state = 2
      this.top = this.offset
      this.onRefresh(this.refreshDone)
    },
    refreshDone() {
      this.state = 0
      this.top = 0
      this.infiniteLoading = false
    },

    infinite() {
      this.infiniteLoading = true
      this.onInfinite(this.infiniteDone)
    },

    infiniteDone() {
      this.infiniteLoading = false
    },

    onScroll(e) {
      if (!this.enableInfinite || this.infiniteLoading) {
        return
      }
      let outerHeight = this.$el.clientHeight
      let innerHeight = this.$el.querySelector(\'.inner\').clientHeight
      let scrollTop = this.$el.scrollTop
      let ptrHeight = this.onRefresh ? this.$el.querySelector(\'.pull-refresh\').clientHeight : 0
      let infiniteHeight = this.$el.querySelector(\'.load-more\').clientHeight
      let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
      if (bottom < infiniteHeight) this.infinite()
    }
  }
}
</script>
<style>
.yo-scroll {
  position: absolute;
  top: 2.5rem;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #ddd
}
.yo-scroll .inner {
  position: absolute;
  top: -2rem;
  width: 100%;
  transition-duration: 300ms;
}
.yo-scroll .pull-refresh {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yo-scroll.touch .inner {
  transition-duration: 0ms;
}
.yo-scroll.down .down-tip {
  display: block;
}
.yo-scroll.up .up-tip {
  display: block;
}
.yo-scroll.refresh .refresh-tip {
  display: block;
}
.yo-scroll .down-tip,
.yo-scroll .refresh-tip,
.yo-scroll .up-tip {
  display: none;
}
.yo-scroll .load-more {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

　　把上面组件拷贝一下，保存vue文件pull-refresh.vue放到你的component/common文件夹下，  然后引入到页面 , 下面是引用demo

 

<template>
  <div class="home">

    <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite"  :loading-text="loadingText" >
      <ul class="list">
        <li v-for="item in articleList">{{item.title}}</li>
      </ul>
    </v-scroll>
  </div>
</template>

<script>
  import { AjaxPlugin, XButton,Group, Cell, XInput} from \'vux\'
  import Scroll from \'../../common/pull-refresh\';

  export default {
    name: \'home\',
    components: {
      \'v-scroll\': Scroll,
      Group,
      XButton,
      Cell,
      XInput,
      AjaxPlugin
    },
    data () {
      return {
        articleList:this.getArticleList(1),
        loadingText:\'加载中...\',
        counter : 1, //当前页面
        num : 20,  // 一次显示多少条
        listdata: [], // 下拉更新数据存放数组
        downdata: []  // 上拉更多的数据存放数组
      }
    },
    mounted : function(){
      //this.getArticleList();
    },
    methods: {




      getArticleList: function (catId) {
        let _this = this
        getDate(\'/index.php\',{params:{m:\'jsonp\',c:\'index\',a:\'lists\',catid:59}},function(data){
          let arr = data.result.data;
          _this.articleList=arr;
          if(arr.length>=_this.num){
            _this.counter++;
          }
        })
        return []
      },
      onRefresh(done) {
        let vm = this;
        vm.loadingText=\'加载中……\';
        getDate(\'/index.php\',{params:{m:\'jsonp\',c:\'index\',a:\'lists\',catid:59}},function(data){
          let arr = data.result.data;
          vm.articleList=arr;
          if(arr.length>=vm.num){
            vm.counter=2;
          }
          done() // call done
        })
      },
      onInfinite(done) {
        let vm = this;
        getDate(\'/index.php\',{params:{m:\'jsonp\',c:\'index\',a:\'lists\',catid:59,page:vm.counter}},function(data){
          let arr = data.result.data;
          vm.articleList=vm.articleList.concat(arr);
          if(arr.length<vm.num){
            vm.loadingText=\'加载完毕……\';
            //vm.$el.querySelector(\'.load-more\').style.display = \'none\';
            return;
          }else{
            vm.counter++;
          }
          done() // call done
        })
      }
    }
  }


  function getDate(url,params,fn) {
    AjaxPlugin.$http.get(url, params)
      .then((response) => {
        if (fn) fn(response.data)
      })


  }

  function htttpRequest (url, params, cb) {
    let dataStr = \'\'
    for (let key in params) {
      dataStr += key + \'=\' + params[key]
    }

    dataStr = dataStr.substr(0, dataStr.length - 1)
    console.log(dataStr);
    AjaxPlugin.$http.post(url, params)
      .then((response) => {
        if (cb) cb(response.data)
      })
  }



</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    flex: 1;
    margin: 10px ;
    border-bottom:#ddd solid 1px;
  }

  a {
    color: #42b983;
  }
</style>