精华内容
下载资源
问答
  • vue 滚动加载数据

    2019-10-09 04:03:38
    参考链接:https://www.npmjs.com/package/vue-infinite-scroll 转载于:https://www.cnblogs.com/yu-hailong/p/8459325.html

    参考链接:https://www.npmjs.com/package/vue-infinite-scroll

    转载于:https://www.cnblogs.com/yu-hailong/p/8459325.html

    展开全文
  • 笔记-VUE滚动加载更多数据

    千次阅读 2019-02-15 09:47:43
    VUE滚动加载更多数据 data() { return { loading: false, loadingMore: false,//loading 加载更多 isScroll: true,//是否可以滚动 list: [], } }, mounted() { document.addEventL...

    VUE滚动加载更多数据

    data() {
        return {
             loading: false,
             loadingMore: false,//loading 加载更多
             isScroll: true,//是否可以滚动
             pageIndex: 1,
             pageSize: 10,
             list: [],
         }
     },
    
    mounted() {
        document.addEventListener('scroll', this.scrollMoreData, false)
    },
    
    methods: {
    	scrollMoreData() {
    		const scrollTopHeight = document.documentElement.scrollTop || document.body.scrollTop //滚动高度
    		const clientHeight = document.documentElement.clientHeight || window.screen.availHeight //屏幕可用工作区高度
    		const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight //网页可见区域高(包括边线的宽)
    		// console.log(scrollTopHeight, clientHeight, scrollTopHeight + clientHeight + 50, offsetHeight)
    		
    		if ((scrollTopHeight + clientHeight) + 50 >= offsetHeight && this.isScroll) {
    		    this.isScroll = false
    		    this.loadingMore = true
    		    let pageNo = this.pageIndex += 1
    		    api.Get('/list', {
    		        pageIndex: pageNo,
    		        pageSize: this.pageSize,
    		    }).then(res => {
    		        this.loadingMore = false
    		        if (res.data.list.length > 0) {
    		            this.isScroll = true
    		            this.list = [...this.list, ...res.data.list]
    		        } else {
    		            this.show = true
    		        }
    		    })
    		}
    		},
    	},
    },
    
    destroyed() {
        document.removeEventListener('scroll', this.scrollMoreData, false)
    }
    
    展开全文
  • Vue滚动加载更多数据

    2020-07-18 16:34:18
    data() { ... loadingMore: false,//loading 加载更多 isScroll: true,//是否可以滚动 pageIndex: 1, pageSize: 10, list: [], } }, mounted() { document.addEventListener('scroll', thi.
    data() {
        return {
             loading: false,
             loadingMore: false,//loading 加载更多
             isScroll: true,//是否可以滚动
             pageIndex: 1,
             pageSize: 10,
             list: [],
         }
     },
    
    mounted() {
        document.addEventListener('scroll', this.scrollMoreData, false)
    },
    
    methods: {
    	scrollMoreData() {
    		const scrollTopHeight = document.documentElement.scrollTop || document.body.scrollTop //滚动高度
    		const clientHeight = document.documentElement.clientHeight || window.screen.availHeight //屏幕可用工作区高度
    		const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight //网页可见区域高(包括边线的宽)
    		// console.log(scrollTopHeight, clientHeight, scrollTopHeight + clientHeight + 50, offsetHeight)
    		
    		if ((scrollTopHeight + clientHeight) + 50 >= offsetHeight && this.isScroll) {
    		    this.isScroll = false
    		    this.loadingMore = true
    		    let pageNo = this.pageIndex += 1
    		    api.Get('/list', {
    		        pageIndex: pageNo,
    		        pageSize: this.pageSize,
    		    }).then(res => {
    		        this.loadingMore = false
    		        if (res.data.list.length > 0) {
    		            this.isScroll = true
    		            this.list = [...this.list, ...res.data.list]
    		        } else {
    		            this.show = true
    		        }
    		    })
    		}
    		},
    	},
    },
    
    destroyed() {
        document.removeEventListener('scroll', this.scrollMoreData, false)
    }
    

     

    展开全文
  • 今天小编就为大家分享一篇vue 使用鼠标滚动加载数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 滚动加载更多

    千次阅读 2018-12-26 15:40:35
    vue 滚动加载更多 通过对滚动条高度 浏览器高度 和文档高度的对比来判断执行请求数据接口 <template> <section class="outer_container"> <section class="...

    vue 滚动加载更多

    通过对滚动条高度 浏览器高度 和文档高度的对比来判断执行请求数据接口

    <template>
    	<section class="outer_container">
    	    <section class="siteIndex inner_container">
    			<section>
    				<div v-for="(item,index) in dataList" :key="index" :id="index" class="item flex">
    					<div class="info">
    						<router-link :to="{path:'/article/'+item.id}">
    							<h2 class="title" v-html="item.title"></h2>
    						</router-link>
    						<div class="flex">
    							<div>
    								<span class="hot" v-if="item.isHot">置顶</span>
    								<span class="type">{{item.category}}</span>
    							</div>
    							<span class="collectNum">浏览量{{item.hits}}</span>
    						</div>
    					</div>
    					<div class="img-responsive">
    						<img v-if="item.image" onclick="return false;" :src="item.image" />
    						<img v-else onclick="return false;" src="../../static/nopic.png" />
    					</div>
    				</div>
    			</section>
    		</section>
    	</section>
    </template>
    <script>
    	import axios from '../utils/fetch'
    	export default {
    		data() {
    			return {
    				dataList:[],
    				limit:10,
    				offset:1,
    				loading:false
    			}
    		},
    		mounted:function(){
    			this.loadArticle()
    			window.addEventListener('scroll',()=>{
    				this.toBottom()
    			})
    		},
    		methods: {
    			toBottom(){
    				let scrollH = document.body.scrollTop||document.documentElement.scrollTop;
    				var docH,windowH;//滚动条滚动高度
    				docH = document.body.scrollHeight||document.documentElement.scrollHeight;//文档高度
    				windowH = window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight;//浏览器窗口高度
    				if(scrollH + windowH >= docH&&!this.loading){//滚动到底部和页面没有正在执行请求网络数据的过程中的条件要同时成立才可以执行请求请求数据操作
    					this.loadArticle()
    				}
    			},
    			loadArticle(){
    				this.loading = true;
    				this.$axios.get('/api/article/recommend', {
    					params: {
    						offset: this.offset,
    						limit: this.limit
    					}
    				})
    				.then((response) => {
    			        let list = response.data.list;
    					this.dataList = this.dataList.concat(list)
    					this.offset = this.offset +this.limit;
    					if(list.length == this.limit){//判断返回数据条数是不是等于需要请求的数据,不等则不再继续加载数据,显示数据已经没有更多了
    						this.loading = false;
    					}
    					// 数据渲染成功后,隐藏下拉刷新的状态
    					this.$nextTick(() => {
    					})
    				})
    				.catch((e) => {
    				})
    			}
    		},
    	}
    </script>
    
    <style scope lang="less">
    	@af: 7.5vw;
    	.outer_container{width: 1000px;margin: 0 auto; overflow: hidden;position: relative;}
    	.siteIndex {width: 1000px;margin: 0 auto;}
    	.slideWrapper{background: #fafafa;}
    	.slideWrapper .banner{padding: 30/@af;}
    	.swiper-pagination-bullet {width: 12px;height: 4px;border-radius: 0;background: #666;}
    	.swiper-pagination-bullet-active {background: #C43026;}
    	
    	.swiper-slide { width: auto; }
    	.nodata{background: #eee;color: #333;
    		img{max-width: 160/@af;}
    		h3{font-size: 32/@af;line-height: 2;}
    		h5{font-size: 24/@af;padding-bottom: 20/@af;font-weight: normal;}
    	}
    </style>
    

    只是初步实现加载功能

    展开全文
  • 关于用鼠标滚动到某个位置我们就去加载数据,这样的场景与业务需求现在越来越常见,现在来分析下《vue.js 实战》中作者的一个解决策略:1. 设置一个标志位用来判断数据是否在加载中2. 将滚动区域设置成 overfow:auto...
  • vue滚动分页加载数据

    2019-03-05 16:50:37
    contentHeight:0,//加载数据内容高度 pageNum:1, //页数 pageCount:15, //条数 isPullupLoadData:false //是否继续请求 } mounted(){ var _self=this; _self.containerHeight=_...
  • vue 滚动加载无限长列表

    千次阅读 2020-01-09 16:29:49
    结合vue-infinite-scroll和vue-virtual-sroller实现滚动加载无限长列表,带有虚拟化(virtualization)功能,能够提高数据量大时候长列表的性能,解决列表数据量大页面卡顿问题 滚动加载vue-infinite-scroll vue-...
  • vue滚动加载插件vue-infinite-scroll

    万次阅读 2018-03-02 13:45:09
    vue-infinite-scroll插件可以无限滚动实现加载更多,其作用是是当滚动滚动到距离底部的指定高度时触发某个方法。 https://github.com/ElemeFE/vue-infinite-scroll/ ...
  • vue 滚动加载组件

    2019-01-04 10:39:43
    &lt;template&gt; &lt;div id="wrap"&gt; &lt;slot&gt;&lt;/slot&gt; &lt;...加载中&lt;/div&gt; &lt;div class="scroll-txt&
  • vue滚动加载事件

    千次阅读 2018-08-16 21:17:17
    currentPage: self.currentPage, // 滚动加载页面数量 type:self.dataParams.type, // 以下为上一页面传过来的参数 NAME: self.dataParams.NAME, //名称-name T_STATUS: self.dataParams.T_STATUS,//历史人员 ...
  • vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装:npm install vue-infinite-loading –...
  • vue Element下拉框滚动加载选项数据

    千次阅读 2020-07-06 11:45:42
    vue Element下拉框滚动加载选项数据vue Element下拉框滚动加载选项数据(防止下拉框数据过多一次性请求过慢) vue Element下拉框滚动加载选项数据(防止下拉框数据过多一次性请求过慢) 1,新建一个directives.js ...
  • vue中表格滚动加载数据的几种方式 表格滚动加载数据本次将分两种类型进行讲解,分别是表格内加载(即监听el-table中的滚动事件,好处是表格的表头可以固定住)、表格的父级元素绑定滚动时间加载数据。 一、监听...
  • vue滚动加载更多问题

    2021-01-12 18:02:36
    注意,滚动标签的高度和滚动条是否开启 mounted () { let _this = this; window.onscroll = function(){ // console.log('参数scroll') //变量scrollTop是滚动滚动时,距离顶部的距离 var scrollTop = ...
  • vue底部滚动加载更多数据 data() { return { loading: false, loadingMore: false,//loading 加载更多 isScroll: true,//是否可以滚动 pageIndex: 1, pageSize: 10, list: [], } }, mounted() { document...
  • 最近刚结束了一个vue项目,项目中发现了自己很多问题,例如,看到功能就想要使用插件,(⊙o⊙)…,这样是肯定不行呀,哎,用插件可以,自己也得会写呀,现在就记录一下一个不错的滚动加载数据。  1.页面布局(重点...
  • Vue无限滚动加载(数据懒加载)

    千次阅读 2019-11-16 10:19:40
    参考网站:... 要实现滚动加载的列表上添加v-infinite-scroll,并赋值相应的加载方法,可实现滚动到底部时自动执行加载方法。 <template> <div class="infinite-list-wr...
  • watch: { orderData (val) { this.$nextTick(() => { // 数据变动 且渲染完成后 this.pageHeight = document.querySelector('html').scrollHeight this.viewHeight = document.querySelect...
  • Vue实现页面滚动加载分页数据

    千次阅读 2021-01-26 11:41:32
    直接上代码: ...以下为js部分 ,请求后台数据需自己封装: export default{ //定义的数据变量 data(){ return { list:[], page:1,//当前页 limit:10 } }, methods:{ //获取后台接口数据
  • <template> <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> </template> <script> export default { data () { return { ... key:.
  • 监听元素内部滚动条事件,滚动到底部加载数据,也可以使用插件进行滚动加载处理 方法一、监听滚动条事件滚动加载 1、dom结构:最外层dom <div class="scrollWrap"> </div> 2、mounted:初始化监听 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,246
精华内容 4,098
关键字:

vue滚动加载数据

vue 订阅