vue自定义指令v-load-more实现上拉加载

vue通过自定义指令实现loadMore上拉加载,实现方法:

common.js

/**
 * 获取style样式
 */
export const getStyle = (element, attr, NumberMode = 'int') => {
        let target;
        // scrollTop 获取方式不同,没有它不属于style,而且只有document.body才能用
        if (attr === 'scrollTop') {
            target = element.scrollTop;
        } else if (element.currentStyle) {
            target = element.currentStyle[attr];
        } else {
            target = document.defaultView.getComputedStyle(element, null)[attr];
        }
        //在获取 opactiy 时需要获取小数 parseFloat
        return NumberMode == 'float' ? parseFloat(target) : parseInt(target);
    }

mixmin.js

import { getStyle } from './common'
export const loadMore = {
    directives: { 
        'load-more': {
            bind: (el, binding) => { //只调用一次,指令第一次绑定到元素时调用
                let windowHeight = window.screen.height;
                let height;
                let setTop;
                let paddingBottom;
                let marginBottom;
                let requestFram;
                let oldScrollTop;
                let scrollEl;
                let heightEl;
                let scrollType = el.attributes.type && el.attributes.type.value; //获取元素的属性是获取的对象而非数组
                let scrollReduce = 2;
                if (scrollType == 2) {
                    scrollEl = el;
                    heightEl = el.children[0];
                } else {
                    scrollEl = document.body;
                    heightEl = el;
                }

                el.addEventListener('touchstart', () => {
                    height = heightEl.clientHeight;
                    if (scrollType == 2) {
                        height = height
                    }
                    setTop = el.offsetTop;
                    paddingBottom = getStyle(el, 'paddingBottom');
                    marginBottom = getStyle(el, 'marginBottom');
                }, false)

                el.addEventListener('touchmove', () => {
                    loadMore();
                }, false)

                el.addEventListener('touchend', () => {
                    oldScrollTop = scrollEl.scrollTop;
                    moveEnd();
                }, false)

                const moveEnd = () => {
                    requestFram = requestAnimationFrame(() => {
                        if (scrollEl.scrollTop != oldScrollTop) {
                            oldScrollTop = scrollEl.scrollTop;
                            moveEnd()
                        } else {
                            cancelAnimationFrame(requestFram);
                            height = heightEl.clientHeight;
                            loadMore();
                        }
                    })
                }

                const loadMore = () => {
                    if (scrollEl.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom - scrollReduce) {
                        binding.value();
                    }
                }
            }
        }
    }
};

loadMore.vue

<template>
  <div class="my_order">
    <ul v-load-more="loaderMore" type="1">
      <li class="order"  v-for="(orderListAll,index) in ordersAll" :key="index">

      </li>
      <li class="more_loading" v-if="touchend">无更多</li>
    </ul>
  </div>
</template>
<script>
  import {
    loadMore
  } from '../javascript/mixin.js'
  import {
    getOrders
  } from '../api/index.js';
  export default {
    name: 'orders',
    mixins: [loadMore],
    data() {
      return {
        orderParams: {
          memberid: uid, //会员id
          pagenum: 1, //页码
          pagesize: '20' //每页条数
        },
        ordersAll: [],
        preventRepeatReuqest: false, //到达底部加载数据,防止重复加载
        touchend: false, //没有更多数据
      }
    },
    mounted() {
      this.initData();
    },
    methods: {
      async initData() {
        try {
          let res = await getOrders(this.orderParams);
          this.ordersAll = res.data.orderInfolist;
          if (res.data.orderInfolist.length < 20) {
            this.touchend = true;
          }
        } catch (err) {

        }
      },
      async loaderMore() {
        if (this.touchend) {
          return
        } //防止重复请求 
        if (this.preventRepeatReuqest) {
          return
        }
        this.preventRepeatReuqest = true;
        this.orderParams.pagenum += 1;
        try {
          let res = await getOrders(this.orderParams);
          this.ordersAll = [...this.ordersAll, ...res.data.orderInfolist];
          if (res.data.orderInfolist.length < 20) {
            this.touchend = true;
            return
          }
          this.preventRepeatReuqest = false;
        } catch (err) {

        }
      },
 
    },

  }

</script>
<style lang="" scoped>
    .my_order{
        width:100%;
    }
</style>

 

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值