精华内容
下载资源
问答
  • vue封装加载更多组件

    2019-12-25 18:09:07
    LoadMore.vue <template> <div class="load-more-wrapper" @touchstart="touchStart($event)" @touchend="touchEnd($event)"> <div class="inner"> <slot></slot> ...

    LoadMore.vue

    <template>
      <div class="load-more-wrapper" @touchstart="touchStart($event)" @touchend="touchEnd($event)">
        <div class="inner">
          <slot></slot>
          <div class="load-more" v-show="noData">当前暂无数据!</div>
          <div class="load-more" v-show="!noData && enableLoadMore">{{loadMoreText}}</div>
          <div class="load-end" v-show="!noData && !enableLoadMore">已经到底了!</div>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: "LoadMore",
      props: {
        enableLoadMore: {
          type: Boolean,
          default: true
        }, // 是否有下一页,默认有
        onLoadMore: {
          type: Function,
          default: undefined,
          require: false
        }, // 加载更多方法
        noData: {
          type: Boolean,
          default: false
        }, // 有无数据,默认有
      },
      data () {
        return {
          loadMoreText: "上拉加载更多",
          startX: 0,
          startY: 0,
          isLoading: false,
        }
      },
      mounted () {
      },
      methods: {
        // 获取初始位置
        touchStart (e) {
          this.startY = e.targetTouches[0].pageY;
          this.startX = e.targetTouches[0].pageX;
        },
        scrollToEnd (e) {
          let scrollHeight = this.$el.scrollHeight;
          let clientHeight = this.$el.clientHeight;
          let scrollTop = this.$el.scrollTop;
    
          if (scrollTop + clientHeight >= scrollHeight && this.enableLoadMore) {
            this.doLoadMore()
          }
        },
        touchEnd (e) {
          if (this.isLoading) {
            return;
          }
          let endX = e.changedTouches[0].pageX,
            endY = e.changedTouches[0].pageY,
            dy = this.startY - endY,
            dx = endX - this.startX;
          if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
            return;
          }
          if (endY < this.startY) {
            this.scrollToEnd(e)
          }
        },
        doLoadMore () {
          this.isLoading = true
          this.loadMoreText = '加载中...'
          this.onLoadMore(this.loadDone);
    
        },
        loadDone () {
          this.isLoading = false;
          this.loadMoreText = '上拉加载更多'
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .load-more-wrapper {
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      transition-duration: 300ms;
      .load-more,
      .load-end {
        color: #aea699;
        font-size: 0.26rem;
        margin: 0.3rem 0;
        text-align: center;
      }
    }
    </style>

    index.vue

    <template>
      <section class="list-warp">
        <van-row class="title cell">
          <van-col span="14">邀请详情</van-col>
          <van-col span="10">已邀请人级别</van-col>
        </van-row>
        <van-row class="list">
          <LoadMore :onLoadMore="onLoadMore" :enableLoadMore="enableLoadMore" :noData="noData">
            <van-row class="item cell" v-for="(item,index) in list" :key="index">
              <van-col span="14">
                <p class="name">{{item.name}}</p>
                <p>{{item.created_at}}</p>
              </van-col>
              <van-col span="10" class="status">
                <span class="examing">审核中</span>
                </span>
              </van-col>
            </van-row>
          </LoadMore>
        </van-row>
      </section>
    </template>
    <script>
    import LoadMore from "@/components/loadMore.vue";
    export default {
      components: {
        LoadMore
      },
      data () {
        return {
          page: 1, //当前页
          size: 10, //分页初始值
          enableLoadMore: true, //加载更多按钮是否展示
          noData: false,
          list: [] //列表数据
        };
      },
      mounted () {
        this.getLoad();
      },
      methods: {
        //数据加载
        getLoad () {
          let params = {
            page: this.page,
            size: this.size
          };
          this.$get("channel/agent/inventList", params, "", this).then(
            res => {
              if (res.data.total == 0) {
                this.noData = true
                return
              }else {
                this.list = [...this.list, ...res.data.list];
                  if (this.page == res.data.last_page) {
                    this.enableLoadMore = false;
                  }
              }          
            }
          );
        },
        //上拉加载更多
        onLoadMore (done) {
          this.page++;
          if (this.enableLoadMore) {
            this.getLoad();
            done();
          }
        }
      }
    };
    </script>
    <style lang='less'>
    
    </style>

     

    展开全文
  • 组件源码 .vue文件style="height:100%;overflow:auto"ref="filesTable">ref="tableInner"class="tableInner">...},mounted() {// 滚动加载更多const _this = this;const _filesTable = thi...

    组件源码 .vue文件

    style="height:100%;overflow:auto"

    ref="filesTable"

    >

    ref="tableInner"

    class="tableInner"

    >

    export default {

    data() {

    return {};

    },

    mounted() {

    // 滚动加载更多

    const _this = this;

    const _filesTable = this.$refs.filesTable;

    const _offsetHeight = _filesTable.offsetHeight;

    _filesTable.addEventListener("scroll", () => {

    const _scrollTop = _filesTable.scrollTop;

    const _bodyHeight = _this.$refs.tableInner.clientHeight;

    if (_scrollTop + _offsetHeight >= _bodyHeight) {

    _this.$emit("dataScroll")

    }

    });

    },

    methods: {},

    components: {}

    };

    引用方式:

    内容

    Events

    @dataScroll

    type: function

    当页面滚动触底后触发事件

    ps :

    需要保证内容部分超出页面高度,即有可滚动的条件,可以触发滚动

    展开全文
  • 上一篇讲到在项目中使用上拉加载更多组件,但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题,我们有时候也会换成滑动到底部自动加载...
  • vue上拉加载更多组件

    千次阅读 2019-02-02 15:17:08
    我想,工作一段时间的都碰见过上拉加载更多需求,现在这种插件也蛮多的,也很多是把上拉加载下拉刷新结合。但是这些组件都有一个问题,就是下拉到最底部,刷新浏览器,浏览器会记住这个距离,从而触发上拉加载的方法...

    很久没发布文章了,但其实一直在学习写组件,本来想写个跑马灯组件,但是因为css动画会出现卡顿,就算开启GPU加速还是会,暂时还没有什么好的解决方法,所以有解决方法的欢迎指点一下。

    我想,工作一段时间的都碰见过上拉加载更多需求,现在这种插件也蛮多的,也很多是把上拉加载下拉刷新结合。但是这些组件都有一个问题,就是下拉到最底部,刷新浏览器,浏览器会记住这个距离,从而触发上拉加载的方法。虽然这个小问题在正常情况下没什么影响,于是自己就研究研究,写了一个上拉加载更多的组件。

    要写上拉加载其实还分两种场景,一种是相对window,也就是相对于可视窗口,一种是在一个容器内。大部分使用场景是相对窗口,所以暂时只写了一个相对于window的。

    上拉加载原理简单来说就是判断内容是否到达底部。容器自身的高度加上距离顶部的距离就是现在整个页面的高度。整个页面的高度减去可视窗口的高度再减去滚动条移动的距离,当接近0的时候就是到达底部的时候。

    明白了这个原理上拉加载就很好实现了。

    标签:

    这边使用了vue的slot插槽。

    data:

    windowHeight: ‘’,contentOffSetHeight: ‘’,downT: ‘’

    因为可视窗口和距离顶部的距离是不会变的,所以初始化的时候就赋值,downT是监听滚动防抖用的。

    Props:

    props: [‘up’, ‘bottomDistance’],

    up对应的就是父组件传递的到达底部是触发的方法,'bottomDistance’是可以设置到达底部距离多少的时候触发加载更多的方法。

    Mounted:

    if (history.scrollRestoration) {
            history.scrollRestoration = 'manual';
        };
        this.windowHeight = document.documentElement.clientHeight || document.body.clientHeight;//可视窗口高度
        this.contentOffSetHeight = document.getElementById('scroll').offsetTop;//容器距离顶部高度
        window.addEventListener('scroll', this.onScroll);
    

    这边可视窗口采用了兼容的写法,然后history.scrollRestoration这个可以去了解一下,就是不记住滚动的距离,刷新的时候就不会直接触发加载方法。然后监听window滚动。

    onScroll()
        {
            if (this.downTime) {
                clearTimeout(this.downTime);
            };
            this.downTime = setTimeout(() = > {
                let contentHeight = document.getElementById('scroll').clientHeight;//容器高度 
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//窗口滚动条高度    
                if (contentHeight + this.contentOffSetHeight - this.windowHeight - scrollTop <= (this.bottomDistance || 0)) {      //加载更多操作     
                    this.$emit('up')
                }
            }, 200);
        }
    

    加上了节流,bottomDistance不穿默认为0,然后节流设置了200毫秒。

    最后beforeDestroy:

    window.scrollTo(0, 0);window.removeEventListener(‘scroll’, this.onScroll)

    刷新当前页面或者离开页面的时候移动到最顶部,防止记住滚动条位置,亲测,要是没有设置history.scrollRestoration,vue生命周期会先移动到顶部然后再移动到记住的位置。其实设置了这个移动到顶部也不需要,这边为了稳定就加上了。还有就是要移除监听滚动,我试了,跟定时间计时器一样,没有在组件销毁的时候移除,会一直存在。

    要说的是,这边没有写加载更多的动画效果,使用的时候可以自定义一个然后隐藏,在触发加载更多的时候显示,加载完之后隐藏,包括已经到底部,都可以自定义。虽然会稍显麻烦,主要是考虑到我写的估计很多人会不喜欢。

    这样看会比较不直观,所以推荐去npm下载一下:

    https://www.npmjs.com/package/wade-ui

    欢迎关注Coding个人笔记 公众号

    展开全文
  • vue滚动加载更多组件,适用于pc端和移动端,功能单一简单,只处理了滚动加载问题,其余loading等效果可自己在slot里面灵活配置 <template> <div class="scroll-more"> <slot></slot> <...

    vue滚动加载更多组件,适用于pc端和移动端,功能单一简单,只处理了滚动加载问题,其余loading等效果可自己在slot里面灵活配置

    <template>
      <div class="scroll-more">
        <slot></slot>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
      methods: {
        //获取滚动条当前的位置
        getScrollTop() {
          var scrollTop = 0;
          if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
          } else if (document.body) {
            scrollTop = document.body.scrollTop;
          }
          return scrollTop;
        },
        //获取当前可视范围的高度
        getClientHeight() {
          var clientHeight = 0;
          if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(
              document.body.clientHeight,
              document.documentElement.clientHeight
            );
          } else {
            clientHeight = Math.max(
              document.body.clientHeight,
              document.documentElement.clientHeight
            );
          }
          return clientHeight;
        },
    
        //获取文档完整的高度
        getScrollHeight() {
          return Math.max(
            document.body.scrollHeight,
            document.documentElement.scrollHeight
          );
        }
      },
      created() {},
      mounted() {
        //滚动事件触发
        var self = this;
        window.onscroll = function() {
          
          if (self.getScrollTop() + self.getClientHeight() >= (self.getScrollHeight())) {
            console.log("到底部了")
            self.$emit('scroll-state',true)
          }
        };
      },
      destroyed() {
        // window.onscroll = null;
      }
    };
    </script>
    
    <style>
    
    </style>
    
    

    使用

    <scroll-more @scroll-state="scroll">
    	# 这里写内容和loading效果
    </scroll-more>
    
    ...
    methods:{
    	scroll(){
    	console.log('触发了')
    	}
    }
    
    
    展开全文
  • -- 加载完成的动画 --> <slot name="nomore" v-if="nomore"></slot> </div> </div> </template> <script> export default { name: 'infinite-scroll', props: { height: { type: String, default: '800px' }, ...
  • 1.局部引用安装的vant 的list在当前有滚动加载更多引如import Vue from 'vue'import { List } from 'vant'import 'vant/lib/index.css'Vue.use(List);2.在data变量中定义data() {return {offset:0,//滚动条与底部...
  • 最近项目需要用到很简单的vue移动端分页组件,网上找了找,没有特别适合的,根据网上找来的代码,自己写了个简单的分页根据设计稿,想要的就是最简单的,上一页,下一页,中间固定放三个显示页数的,不需要显示很...
  • }}exportdefault{name:'App4',components: {},data() {return{page:1,//当前页total: 0,//总数据数量pageSize: 10,//每页几个loadTxt: {more:"正在加载...",none:"没有更多了~",err:"加载失败~"},loadKey:"none",.....
  • 本文实例讲述了vue实现的上拉加载更多数据/分页功能。分享给大家供大家参考,具体如下:加载状态jsexport default {name: '',data () {return {list: [],now_item: '',current_index: 0,list_param: {page: 1},no_...
  • Vue.js实现的上拉加载更多数据/分页功能示例发布于 2020-8-13|复制链接摘记: 本文实例讲述了vue实现的上拉加载更多数据/分页功能。分享给大家供大家参考,具体如下:加载状态```xhtml..本文实例讲述了vue实现的上拉...
  • 主要介绍了vue loadmore 组件滑动加载更多源码解析,需要的朋友可以参考下
  • var app = new Vue({ el: "#app", data() { return { Eachmax:12, banimg:"", finishedText: '没有更多了', loading: false, finished: false, isshowloading: false, searchvalue: null, twoProduct:[], list:[], ...
  • 主要为大家详细介绍了vue瀑布流组件实现上拉加载更多,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 组件代码: scrollView.vue <template> <div class="pageScroll" ref="pageScroll" @scroll="scroll($event)"> <div class="scrollBox" @touchstart="touchStart($event)" @touchmove="touchMove($...
  • 下拉更新松开更新更新中加载中……exportdefault{props: {offset: {type: Number,default: 40},enableInfinite: {type: Boolean,default: true},enableRefresh: {type: Boolean,default: true},onRefresh: {type: ...
  • 介绍NutUI是一套京东风格的移动端Vue组件库,开发和服务于移动Web界面的企业级前中后台产品。支持服务器端渲染(SSR)。相关地址github:https://github.com/jdf2e/nutui官网: https://nutui.jd.com/#/index具备特性...
  • vue移动端列表组件,支持下拉刷新,上拉加载更多
  • 前言京东物流目前在 M 端的业务越来越,如公众号、移动官网。这对 M 端的 UI 框架要求就越高,组件丰富、接入友好,稳定性高,拓展性及性能上都有较高的要求。自研的 pandora-mobile 目前看不符合现有需求,相较而...
  • 主要介绍了vue loadmore组件上拉加载更多功能示例代码,需要的朋友可以参考下
  • Vue 组件封装之 ScrollView 上拉加载更多一、ScrollView 上拉加载更多二、使用案例三、API 使用指南四、源代码 一、ScrollView 上拉加载更多 组件说明: 实现上拉到底部加载更多功能。 效果展示: 当滑动到底部超过...
  • vue瀑布流组件滑动加载更多

    千次阅读 2017-07-18 17:56:19
    建议先看上一篇再来食用本文,如果直接想看源码文末就是~上一篇讲到在项目中使用上拉加载更多组件,但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 379
精华内容 151
关键字:

vue加载更多组件

vue 订阅