vue实现分页 上拉加载下拉刷新——组件版

 

　　记录完了未封装组件的，这个就拆分一下了，用的时候也比较方便。

　　components/LoadMore.vue

　　　　　　

<template>
  <div class="my-scroll" @scroll.passive="onScroll($event)" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)" ref="myScroll" :style="'margin-top: '+ scrollMarginTop +'px;height: calc(100vh - ' + scrollMarginTop + 'px);'">
    <div class="scroll-top" :style="'height:'+top+'px;'">
      <div v-if="aspect==2">
        <p v-if="state==6">下拉刷新</p>
        <p v-if="state==2">松开刷新</p>
        <p v-if="state==1">
          <img :src="Load"/>刷新中
        </p>
        <p v-if="state==3">
          <img :src="Load"/>刷新完成
        </p>
      </div>
    </div>

    <div class="scroll-list">
      <slot name='scrollList'></slot>
      <!-- <div>
        <ul>
          <li v-for="(x,index) in list" :key="index">列表</li>
        </ul>
      </div> -->
      
      <div class="scroll-bottom">
        <p v-if="state==4"><img :src="Load"/>加载中</p>
        <p v-if="state==5"><img :src="Load"/>加载完成</p>
        <p v-if="state==7" class="no-more-data" v-show="noMoreState">没有更多了，我是有底线的</p>
      </div>
    </div>

  </div>
</template>

<script>
  import Load from '@/assets/loading1.gif'
  export default {
    name:'myScroll',
    props:{
      'page':{
        type:Object,  //counter:当前页  pageStart:开始页数  pageEnd:结束页数  total:总页数
      },
      'onRefresh':{ //刷新回调
        type:Function,
        require:true
      },
      'onPull':{ //加载回调
        type:Function,
        require:true
      },
      'getScrollTop':{ //获取滚动条位置
        type:Function
      },
      'setScrollPage':{ //改变滚动条位置
        type:Function
      },
      'scrollState':{//是否可滑动
        type:Boolean,
        require:true
      },
      'noMoreState':{//没有更多是否显示
        type:Boolean,
        require:true
      },
      'scrollMarginTop':{
        type:Number,
        default: 100
      }
    },
    data(){
      return {
        Load,
        pageX:0,
        pageY:0,
        state:0,
        scrollPosition:0,
        myScroll:null,
        myScrollList:null,
        top:0,
        aspect:0, //1:向下 2:向上
        listHeight:0,
      }
    },
    mounted(){
      this.myScroll = this.$refs.myScroll //获取滑条dom
      this.myScrollList = this.myScroll.children[1] //获取列表dom
    },
    methods:{
      ScrollTop(top){ //修改滚动条位置
        this.myScroll.scrollTop = top
      },
      // /*
      //   * 刷新中：1
      //   * 松开刷新：2
      //   * 刷新完成：3
      //   * 加载中：4
      //   * 加载完成：5
      //   * 下拉刷新：6
      //   * 没有更多：7
      //   */
      setState(index){ //修改状态
        this.state = index
        if(index == 5||index == 3){
          setTimeout(()=>{
            this.state = 0
            this.top = 0
          },500)
        }
      },
      touchStart(e){ //触摸事件
        // console.log('触摸事件',e)
        this.pageX = e.targetTouches[0].pageX
        this.pageY = e.targetTouches[0].pageY
      },
      touchMove(e){ //触摸滑动事件

        this.scrollPosition = this.myScroll.scrollTop //获取滚动条位置

        // console.log(this.scrollPosition)

        if(this.scrollState && (e.targetTouches[0].pageY > this.pageY)){ //向上滑动
          this.aspect = 2

          if(this.myScroll.scrollTop==0){
            let diff = e.targetTouches[0].pageY - this.pageY - this.scrollPosition
            this.top = Math.pow(diff, 0.9)

            let ranget = diff/document.body.clientHeight*100 //计算在屏幕上滑动了多少

            if(ranget > 20){
              this.state = 2
            }else if(ranget < 15){
              this.state = 6
            }
            e.preventDefault()
          }
        }else if(this.scrollState && this.state!=4){ //向上滑动
          this.aspect = 1
        }
      },
      touchEnd(e){
        if(this.aspect == 2&&this.state == 2||this.state == 1){ //上拉处理
          this.top = 100
          this.state = 1
          this.topCallback()
        }else if(this.aspect == 2){
          this.state = 0
          this.top = 0
        }
      },
      onScroll(e){
        let listHeight = this.myScrollList.offsetHeight //列表总高度
        let listScrollTop = e.target.scrollTop + this.myScroll.offsetHeight //当前滚动条位置
        if(this.state == 0&&listHeight-listScrollTop < 100){
          this.bottomCallback()
        }
        if(this.getScrollTop){ //返回X，Y
          this.getScrollTop(e.target.scrollTop)
        }
      },
      topCallback(){ //刷新回调
        this.onRefresh(this.state)
      },
      bottomCallback(){ //加载回调
        if(this.state != 7){
          this.state = 4
          this.onPull(this.state)
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
.my-scroll{
  margin-top: 100px;
  height: calc(100vh - 100px);
  background: #fff;
  overflow: auto;
}
.scroll-top, .scroll-bottom{
  background: #f4f4f4;
  font-size: 28px;
  text-align: center;
  color: #999;
  p{
    padding: 20px 0;
  }
  img{
    width: 40px;
    vertical-align: -10px;
    margin-right: 20px;
  }
}
.no-more-data{
  position: relative;
}
.no-more-data::before,.no-more-data::after{
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 2px;
  background: #ccc;
}
.no-more-data::before{
  left: 70px;
}
.no-more-data::after{
  right: 70px;
}
</style>

 

　　　　使用

　　　　　

<template>
  <div>
    <div class="header">
      23213123123131321
    </div>

    <my-scroll ref="myScroll" :page="page" :on-refresh="onRefresh" :on-pull="onPull"  :get-scroll-top="getTop" :scrollState="scrollState" :noMoreState="noMoreState">
      <div slot="scrollList">
        <ul>
          <li v-for="(x,index) in list" :key="index">{{index}}</li>
        </ul>
      </div>
    </my-scroll>

  </div>
</template>

<script>
  import myScroll from '@/components/LoadMore.vue'
  export default {
    components:{
      myScroll
    },
    data(){
      return{
        page:{
          counter:1,  
          pageStart:1,  
          pageEnd:1,  
          total:1
        },
        scrollState:true,
        noMoreState:false,
        list:[]
      }
    },
    mounted(){
      for(let i=0;i<1*20;i++){
        this.list.push({})
      }
    },
    methods: {
      onRefresh(mun){ //刷新回调
        console.log(mun)
        setTimeout(()=>{
          this.$refs.myScroll.setState(3)

          // 下拉刷新数据重新请求
          if(mun === 1){
            this.page.counter = 1;
            this.list = [];
            for(let i=0;i<20;i++){
              this.list.push({})
            }
          }

        },500)
      },
      onPull(mun){ //加载回调
        if(this.page.counter<=this.page.total){
          setTimeout(()=>{
            this.page.counter++
            this.$refs.myScroll.setState(5)
            for(let i=0;i<10;i++){
              this.list.push({})
            }
          },500)
        }else{
          if(this.page.counter !== 1){
            this.noMoreState = true
          }
          this.$refs.myScroll.setState(7);
        }
      },
      getTop(y) {//滚动条位置
      },
    }
  }
</script>

<style lang="scss" scoped>
  .header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 102;
    background: #666;
  }
  li{
    font-size: 28px;
    color: #666;
    border-bottom: 1px solid #eee;
    margin-left: 20px;
    padding: 20px 0;
  }
</style>

 

 

　　　也是需要整个loading图，然后直接用就可以了