摘要:光判斷滑到最底部是不夠的,首先需要知道用戶現在的操作,是點擊還是滑動向上向下向左向右這里受到了原生判斷手指滑動方向的啟發。最近想找圖片縮放的插件,感覺也跟觸摸事件有關,可以研究一下。
1. 寫在前面
我最開始糾結當用戶滑動時onTouchMove事件會不停的執行去調接口,于是我僥幸的想只用onTouchEnd事件去判 斷用戶是否滑到最底部,但是這種方法應用到項目中才發現點擊的時候也會觸發onTouchEnd,實際應用并不理想。
光判斷滑到最底部是不夠的,首先需要知道用戶現在的操作,是點擊還是滑動(向上、向下、向左、向右),這里 受到了[原生js判斷手指滑動方向][1]的啟發。2. demo
class demo Component { constructor(props) { super(props); this.state = { finished: false,//是否全部加載完畢 isFoot: true, //阻止用戶頻繁上拉調接口 } this._page = 1; //分頁頁碼 this.val = ""; //搜索框的值 this._page_size = 5; //每頁顯示個數 this.startx; //觸摸起始點x軸坐標 this.starty; //觸摸起始點y軸坐標 } //接觸屏幕 touchStart(e) { this.startx = e.touches[0].pageX; this.starty = e.touches[0].pageY; } //離開屏幕([e.changedTouches][2]) touchEnd(e) { let endx, endy; endx = e.changedTouches[0].pageX; endy = e.changedTouches[0].pageY; let direction = this.getDirection(this.startx, this.starty, endx, endy); switch (direction) { case 0: console.log("未滑動!"); break; case 1: console.log("向上!"); this.loadData(); break; case 2: console.log("向下!"); break; case 3: console.log("向左!"); break; case 4: console.log("向右!"); break; default: } } //觸摸點和離開點連線與[x軸角度][3] getAngle(angx,angy) { return Math.atan2(angy, angx) * 180 / Math.PI; } //根據接觸和離開判斷方向 1向上 2向下 3向左 4向右 0未發生滑動([Math.abs][4]) getDirection(startx, starty, endx, endy) { let angx = endx - startx; let angy = endy - starty; let result = 0; //如果滑動距離太短 if (Math.abs(angx) < 2 && Math.abs(angy) < 2) { return result; } let angle = this.getAngle(angx, angy); if (angle >= -135 && angle <= -45) { result = 1; } else if (angle > 45 && angle < 135) { result = 2; } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { result = 3; } else if (angle >= -45 && angle <= 45) { result = 4; } return result; } //**向上滑動時(在這里才真正的判斷是否到最底部)** loadData() { console.log("數據的高-------------------------", this.refs.onPullUp.clientHeight); console.log("滾動的高------------------------", document.documentElement.scrollTop); console.log("滾動的高------------------------", document.body.scrollTop); console.log("屏幕的高------------------------", document.documentElement.clientHeight); let { meActs } = this.props; let dataHeight = this.refs.onPullUp.clientHeight; let scrollHeight = document.body.scrollTop || document.documentElement.scrollTop; let screenHeight = document.documentElement.clientHeight; const h = 10;//自定義距離底部多少時concat數據 if (dataHeight - scrollHeight - h < screenHeight && this.state.isFoot) { this.setState({ isFoot: false, }); console.log("應該只顯示1次"); let params = { value: this.val, page_index: this._page, page_size: this._page_size, } meActs.getRecentReadList(this.accessKey, this.accessID, params).then((res) => { if (res.data.code === 10000 && res.data.data.list.length > 0) { this.setState({ isFoot: true, }); this._page++; } //數據加載完畢 if (res.data.code === 10000 && res.data.data.list.length == 0) { this.setState({ finished: true, }) } }); } } render() { return(3. 兼容性) } } {listItems}{ this.state.finished ? 我是有底線的 : recentReadList.list.length > 0 ? this.state.isFoot ? 上拉加載更多 :: 暫無信息 }
微信端ios 安卓暫時還未發現任何異常(已上線的項目)4. 結語
移動端觸摸事件的用處遠不止如此,這次是因為antd自帶的上拉加載插件在自身項目中應用太復雜所以決定自己 寫一個滿足自身項目需求的代碼少兼容性還看得過去的就行。最近想找react圖片縮放的插件,感覺也跟觸摸事件 有關,可以研究一下。
**
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92302.html
摘要:支持復雜頁面,例如添加自定義頭部和底部布局,支持橫向滑動,還可以支持粘貼頭部類似微信好友分組,支持不規則瀑布流效果,支持側滑刪除功能。十分方便實現復雜的布局頁面,結構上層次分明,便于維護。 目錄介紹 1.復雜頁面庫介紹 2.本庫優勢亮點 2.1 支持多種狀態切換管理 2.2 支持添加多個header和footer 2.3 支持側滑功能和拖拽移動 2.4 其他亮點介紹 3.如...
摘要:支持復雜頁面,例如添加自定義頭部和底部布局,支持橫向滑動,還可以支持粘貼頭部類似微信好友分組,支持不規則瀑布流效果,支持側滑刪除功能。支持粘貼頭部的需求效果,這種效果類似微信好友分組的那種功能界面。 目錄介紹 1.復雜頁面庫介紹 2.本庫優勢亮點 2.1 支持多種狀態切換管理 2.2 支持添加多個header和footer 2.3 支持側滑功能和拖拽移動 2.4 其他亮點介紹 ...
摘要:因為業務的需要界面需要實現分頁的功能,所以我就研究了一下如何利用自帶的組件實現上拉加載更多功能。代碼如下上拉加載更多初始化方法如下下面便是上拉加載更多的方法這樣就大功告成啦 因為業務的需要界面需要實現分頁的功能,所以我就研究了一下如何利用mint-ui自帶的loadmore組件實現上拉加載更多功能。 首先在文件中引入組件 import {Indicator, Loadmore} f...
摘要:本場是講一個基于實現多切換上拉加載更多的實例,像這種多切換加載更多的場景,不管在端還是移動端都還挺常見的,比如商城類,訂單中心等。通過學習本項目,你也可以做出多切換上拉加載更多的效果,而不必到處找別人的例子。 本場 Chat 是講一個基于 Vue+Better-Scroll 實現多 Tab 切換上拉加載更多的實例,像這種多 Tab 切換加載更多的場景,不管在 PC 端還是移動端都還挺常...
閱讀 3433·2023-04-25 18:14
閱讀 1526·2021-11-24 09:38
閱讀 3244·2021-09-22 14:59
閱讀 3060·2021-08-09 13:43
閱讀 2562·2019-08-30 15:54
閱讀 563·2019-08-30 13:06
閱讀 1540·2019-08-30 12:52
閱讀 2719·2019-08-30 11:13