今天研究了一下上拉加载数据组件

同名公众号 - 人生代码

于 2019-01-17 20:20:18 发布

阅读量753

点赞数 1

分类专栏： web前端 Vue3 + TS 进阶之路文章标签： Vue组件

本文链接：https://blog.csdn.net/qq_36772866/article/details/86530684

版权

Vue3 + TS 进阶之路同时被 2 个专栏收录

129 篇文章 29 订阅 ¥79.90 ¥99.00

订阅专栏

超级会员免费看

web前端

40 篇文章 11 订阅 ¥79.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了如何研究并实现Vue组件，特别是上拉加载数据的组件。通过分析页面结构，包括footer、header、滚动加载提示及无数据状态的处理，详细介绍了scroll.vue组件的编写。在应用过程中遇到的touchmove事件取消问题，作者提供了相关解决方案链接，并分享了自己的码云项目地址，以供后续学习和更新。

摘要由CSDN通过智能技术生成

一直都想研究一下vue组件是如何写的，有幸今天终于开始了研究，所以今天才写了这一篇文章出来，我们先来分析一下整个页面吧
在这里插入图片描述
底部(footer.vue)是固定在顶部的,组件源码如下：

头部(header)也是固定在顶部的

我们在滚动加载时，需要给出提示，加载更多这样的字样

(loadmore.vue)
<template>
<div class="more" v-show="loadmoreShow">
	{
  {text}}		
</div>	
</template>

<script>
// eslint-disable-next-line
/* eslint-disable */
export default {
	name: 'loadmore',
	props: {
		text: {
			type: String,
			default: '',
		},
		loadmoreShow: {
			type: Boolean,
			default: false,
		}
	}
}
</script>
<style scop