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

在【实现丰盛】的插件基础修改【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>

巴特西

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

最新文章

热门文章