标签：屏幕高度 col $.ajax targe pst ram ops 屏幕 上拉
vue在移动端开发过程中，上拉加载、下拉刷新是页面的基本需求，现在给大家介绍一种基于touch事件封装的刷新组件。
组件支持传参、传递事件、请求成功异步回调、上拉与触底触发加载或刷新。
这里我们有两个页面，父组件note.vue与刷新组件baseScroll.vue。
通过Prop向子组件传递数据、通过事件向父组件发送消息、通过插槽slot分发内容。
note：
<base-scroll v-bind:url="url" v-bind:param="param" @send-data="sendData" ref="baseScroll">
<div slot="content">
<!--内容区-->
</div>
</base-scroll>
这里我们note页面向子组件传递了请求地址、参数，sendData则用来接收子组件的事件回调。
baseScroll：
props:{ // 请求数据的地址 url:‘‘, // 请求参数 param:{ type: Object, }, // 每页显示数据条数 pageSize: { default:10 }, pageNoName: { default: ‘page_no‘ }, pageSizeName: { default: ‘page_size‘ }, }
组件里面我们使用touch相关事件来达到刷新、加载的效果。
baseScroll：
<div class="vue-scroll" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)"> <slot name="content"></slot> </div>
其实机制很简单，就是上滑到页面顶部触发刷新，滑动到页面触底触发数据加载 。关键我们要通过偏移量来判断什么时候刷新或加载。这里有篇详细介绍页面偏移量的文章，点我传送门！
baseScroll：
touchStart(e) { // 屏幕高度 this.clientHeight=parseInt(`${document.documentElement.clientHeight}`) //滚动开始页面距顶距离 this.scrollTopStart=window.scrollY // 页面高度 this.pageHeight=e.currentTarget.clientHeight // 触摸距离页面起点 this.startY = e.targetTouches[0].pageY // 触摸距离屏幕起点 this.clientY = e.targetTouches[0].clientY }, touchEnd(e) { if(!this.hasMove)return this.hasMove=false // 滚动结束页面距顶距离 this.scrollTopEnd=window.scrollY var sLength=this.scrollTopEnd-this.scrollTopStart if(this.clientHeight+this.startY+sLength+15>=this.pageHeight+this.clientY){ this.nextPage() //页面加载 }else if(this.startY+sLength<=this.clientY){ this.refresh() //页面刷新 } }, touchMove(e) { this.hasMove=true },
touchStart拿到滚动起点的位置及其他页面或屏幕高度；touchEnd中通过判断滚动的值来确定是加载或刷新；hasMove值用来区分用户的操作是点击还是滑动。
确认后是下拉刷新还是上拉加载后，我们执行相应的操作。
baseScroll：
refresh(){ this.currPageNo = 1 this.getData(data=>{ },0) }, nextPage(){ this.getData(data => { }, 1) }, getData(callback, type){ var self=this // 设置分页参数 if (typeof this.param === ‘string‘) { this.param = JSON.parse(this.param); } this.param[this.pageNoName]=this.currPageNo this.param[this.pageSizeName]=this.pageSize $.ajax({ type: "get", url: this.url, data: this.param, dataType: ‘json‘, success: function (res) { var data=res.data callback(data) self.currPageNo += 1; self.$emit(‘send-data‘, data,type) }, }) },
这里我是调用接口获取数据然后$emit(‘send-data‘,data,type)传递数据给父组件，当然页面数据上的操作显示就交给父组件进行模板渲染，子组件内部可以做些加载、刷新的动画显示。
并且只要涉及到页面分页、需要上拉下拉操作的页面都可以复用该组件，只是接口地址、参数不同！
标签：屏幕高度 col $.ajax targe pst ram ops 屏幕 上拉
原文地址：https://www.cnblogs.com/lodadssd/p/10057589.html
