精华内容
下载资源
问答
  • Vue上拉加载更多

    2019-10-21 16:19:06
    原文地址:https://www.jianshu.com/p/30aa13eedcf9
    展开全文
  • vue上拉加载更多

    千次阅读 2019-02-19 21:25:07
    app.vue <template> <div id="app"> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> <div class="con&...

    app.vue

    <template>
      <div id="app">
        <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    		<div class="con">
    			<p v-for="(el,key) in arr" :key="key">{{el}}</p>
    		</div>
    		
    		<LoadMoreCom v-on:getNewData="getNewData" :loadMoreObj="loadMoreObj"></LoadMoreCom>
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    import LoadMoreCom from './components/LoadMoreCom.vue'
    
    export default {
      components: {
        HelloWorld,LoadMoreCom
      },
    	data(){
    		return {
    			arr:[],
    			loadMoreObj:{
    				url:'/api/getInfo',
    				pageSize:10,
    			}
    		}
    	},
    	methods:{
    		getNewData(_arr){
    			this.arr=this.arr.concat(_arr);
    		}
    	}
    }
    </script>
    
    <style>
    p{padding: 10px 0;margin-bottom: 10px;height: 50px;background: #f00;color: #fff;}
    </style>
    
    

    LoadMoreCom.vue

    <template>
      <div class="loadMore" v-loading="isLoading">
    	  {{isEnd?'没有了':'加载更多'}}
      </div>
    </template>
    
    <script>
    import $ from 'jquery'
    export default {
    	props: ['loadMoreObj'],
    	created(){
    		var that=this;
    		$(window).scroll(function(){
    			// scroll at bottom
    			if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    				that.startLoad();
    			}
    		});
    		this.startLoad();
    	},
    	data(){
    		return {
    			isEnd:false,
    			isLoading:false,
    			curPage:1,
    		}
    	},
    	methods:{
    		startLoad(){
    			if(this.isLoading || this.isEnd){
    				return;
    			}
    			this.isLoading=true;
    			var that=this;
    			// ajax需要的参数,自己根据逻辑修改
    			var obj={
    				curPage:this.curPage,
    				pageSize:this.loadMoreObj.pageSize,
    				url:this.loadMoreObj.url,
    			}
    			console.log(obj);
    			// 模拟数据请求
    			setTimeout(function(){
    				that.isLoading=false;
    				that.curPage++;//当前页码
    				
    				// 假如第四页结束
    				if(that.curPage==4){
    					that.pageEnd();
    					return;
    				}
    				
    				var arr=[
    					"你好1","你好1","你好1","你好1","你好1","你好1","你好1","你好1",
    				]
    				that.$emit('getNewData',arr);
    			},1000)
    		},
    		// 最后一页
    		pageEnd(){
    			this.isEnd=true;
    		}
    	},
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    	.loadMore{text-align: center;}
    </style>
    
    
    展开全文
  • vue 上拉加载更多数据 / 分页

    千次阅读 2019-02-11 17:22:20
    加载状态 ...上拉加载" :show-loading="false" background-color="#fbf9fe"&gt;&lt;/load-more&gt; &lt;/div&gt; &lt;div v-if='has_log == 1'

     加载状态

    <div v-if='has_log == 0'>
          <load-more tip="上拉加载" :show-loading="false" background-color="#fbf9fe"></load-more>
        </div>
        <div v-if='has_log == 1'>
          <load-more tip="正在加载" :show-loading="true"></load-more>
        </div>
        <div v-if='has_log == 2'>
           <load-more tip="没有更多数据了" :show-loading="false" background-color="#fbf9fe"></load-more>
        </div>

    js

     

    export default {
      name: '',
      data () {
        return {
          list: [],
          now_item: '',
          current_index: 0,
          list_param: {page: 1},
          no_data: false,
          has_log: 0
        }
      },
      components: {
        XInput
      },
      created () {
        this.get('/api/index/index', this.list_param).then((data) => {
          this.list = data.data.data
          this.list_param.page += 1
        })
        window.addEventListener('scroll', this.onScroll)
      },
      methods: {
        onScroll () {
          this.has_log = 1
          let innerHeight = document.querySelector('#app').clientHeight
          let outerHeight = document.documentElement.clientHeight
          let scrollTop = document.documentElement.scrollTop
          // console.log(innerHeight + ' ' + outerHeight + ' ' + scrollTop)
          // console.log(outerHeight + scrollTop - 30)
          // console.log(innerHeight)
          if (outerHeight + scrollTop === innerHeight + 57) {
            if (this.no_data === true) {
              this.has_log = 2
              return false
            }
            this.get('/api/index/index', this.list_param).then((data) => {
              if (data.data.data.length > 0) {
                this.list = [...this.list, ...data.data.data]
                this.list_param.page = this.list_param.page + 1
                this.has_log = 0
              } else {
                this.has_log = 2
                this.no_data = true
              }
            })
          }
        }
      }
    }

     

    展开全文
  • 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个人笔记 公众号

    展开全文
  • 文章很长的时候又不使用翻页,可以考虑下拉加载。。 data () { return { scroll: true, //设置一个开关避免重复请求数据 pagenum: 1, //当前页数 totalnum: 3, //总页数 articleList: [], //页面数据数组 no...
  • 主要介绍了vue loadmore组件上拉加载更多功能示例代码,需要的朋友可以参考下
  • 主要为大家详细介绍了vue瀑布流组件实现上拉加载更多,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了vue实现的上拉加载更多数据/分页功能,涉及基于vue的事件响应、数据交互等相关操作技巧,需要的朋友可以参考下
  • 考虑到项目中上拉加载更多的地方会有很多,所以封装成了组件,由于时间紧张,整体的先做出来了,还有一点问题,就是上拉加载的时候,loading特效和文字没出现,后期有时间改一下 ** loadMore.vue ** <template&...
  • vue 移动端实现上拉加载更多

    千次阅读 2019-05-07 18:20:16
    根据项目需求实现上拉加载更多~我用的是vue-infinite-loading 插件实现的。下面是安装流程和使用方法:有需要直接拿去用 第一步:安装 npm install vue-infinite-loading --save 第二步:在需要上拉加载的单...
  • VUE下拉刷新上拉加载更多(mt-loadmore) <div style="height:100vh;overflow: scroll;"> <mt-loadmore :bottomMethod="loadBottom" :bottom-all-loaded="allLoaded" :bottomDistance="1...
  • vue移动端列表组件,支持下拉刷新,上拉加载更多
  • vue开发APP,结合vue-scroller实现上拉加载更多,下拉刷新数据的功能,没有一点问题,易懂 1、下载vue-scroller依赖包并在main.js中引用 npm i vue-scroller -D ————下载依赖包 import VueScroller from 'vue-...
  • Vue 组件封装之 ScrollView 上拉加载更多一、ScrollView 上拉加载更多二、使用案例三、API 使用指南四、源代码 一、ScrollView 上拉加载更多 组件说明: 实现上拉到底部加载更多功能。 效果展示: 当滑动到底部超过...
  • vue瀑布流组件上拉加载更多

    千次阅读 2017-07-18 13:57:55
    最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯。首先简单写一下模板部分的html代码,,很简单清晰...
  • mui&&vue上拉加载更多

    千次阅读 2018-02-02 16:15:26
    首先,是vue的点击加载更多,使用Vue的组件实现,代码5" is='my-next-page' :is-more="reIsMore" v-on:getmore="getListMore('02')">然后在commom.js中这样写,因为可以重复使用所以写在公共js中 /* * 全局注册 ...
  • 主要介绍了vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多,本文分步骤通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本篇文章主要介绍vue2.0 移动端实现下拉刷新和上拉加载更多的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue上拉加载组件及其使用方法

    千次阅读 2019-03-22 11:50:32
    该代码为vue上拉加载组件 可以应用于各种手机vue项目 把该代码放到一个独立的组件里 我们起名为loadmore.vue * ## **loadmore.vue文件** * <template> <div class="my-loadmore"> <div class=...
  • 项目中使用可以用vant的列表,自带下拉刷新和上拉加载更多。动态效果更好。 vue2版-vant-list列表URL 在mounted中加入监听事件和处理事件 html 暂无更多 (NoMore?'block':'none')}" class="NoMoreBox">暂无更多div>...
  • downdata: [] // 上拉更多的数据存放数组 } }, mounted : function(){ this.getList(); }, methods: { getList(){ let vm = this; vm.$http.get('...
  • vue MintUI实现上拉分页加载更多

    千次阅读 2019-03-03 11:22:00
    MintUI实现上拉分页加载更多要用到Infinite scroll 新闻页面 &lt;template&gt; &lt;div&gt; &lt;ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading&...
  • 本场 Chat 是讲一个基于 Vue+Better-Scroll 实现多 Tab 切换上拉加载更多的实例,像这种多 Tab 切换加载更多的场景,不管在 PC 端还是移动端都还挺常见的,比如商城类,订单中心等。本人在项目中也经常用这种,已经...
  • 今天给大家分享vue上拉刷新,加载更多的组件VueScroller的使用 第一步安装: npm install vue-scroller -D 第二部配置 main.js import VueScroller from 'vue-scroller' Vue.use(VueScroller) 第三部开始...
  • 本场 Chat 是讲一个基于 Vue+Better-Scroll 实现多 Tab 切换上拉加载更多的实例,像这种多 Tab 切换加载更多的场景,不管在 PC 端还是移动端都还挺常见的,比如商城类,订单中心等。本人在项目中也经常用这种,已经...
  • {{item.title}}   ...import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Loadmore } from 'mint-ui' Vue.component(Loadmore.name, Loadmore); export

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,359
精华内容 16,943
关键字:

vue上拉加载更多

vue 订阅