在作flutter內webview內嵌h5的時候，遇到了在ios下滑動頁面會出現橡皮筋效果，而在android下不會出現該問題。這樣的話在ios下滑動會意外的觸發會感覺頁面整體在上下彈動。
後面繼續開發中發現次方案只能解決首次手勢問題，比如手指一直沒離開螢幕而先向上又向下依然會出現彈性滾動，在移動過程中不能中斷，目前沒找到更好的辦法解決
方案1：在移動端h5中我們可以監聽touchstart（觸控開始）,touchmove（觸控移動）,touchend（觸控結束）等觸控事件，來判斷當前是否該滑動。
方案2： 若是引入的第三方滾動元件，大多數第三方元件都是使用transform來實現滾動的，所以只需要設定css: touch-action:none;則不會觸發觸控。
我這裡使用的webview自帶的瀏覽器滾動條來實現的原生滾動，目前使用起還是比較順手。
// 區域性使用瀏覽器自帶滾動條
@mixin usescrollbybrowser
($h:
1px));
&::-webkit-scrollbar
}
<
!-- 建立滾動區域 滾動一級--
>
="area-scroll" data-scroll-root=
"true"
>
<
!-- 滾動二級 主要獲取其高度與滾動一級比較 --
>
="area-scroll-content"
>
<
/slot>
<
/div>
<
/div>
<
/template>
touch._startx = e.touches[0]
.pagex;
touch._starty = e.touches[0]
.pagey;
let endx = e.touches[0]
.pagex;
let endy = e.touches[0]
.pagey;
let distancex = endx - touch._startx;
let distancey = endy - touch._starty;
let finaldirction =
'none';if
(math.
abs(distancex)
< math.
abs(distancey)
&& distancey >0)
else
if(math.
abs(distancex)
< math.
abs(distancey)
&& distancey <0)
if
(curnodeparent.scrolltop ===
0&& finaldirction ===
'down'
)
if
( math.
ceil
(curnodeparent.clientheight + curnodeparent.scrolltop)
== curnodeparent.scrollheight &&
finaldirction ===
'up'
)
_findparent:
(pnode, finaldirction)
=>
else
elseif(
math.
ceil
(curnodeparent.clientheight + curnodeparent.scrolltop)
== curnodeparent.scrollheight &&
finaldirction ===
'up'
)else}}
else
}
// 在頂層vue模板中引入觸控事件
import
from
'utils/touch'
// script中
created()
,destroyed()
<
!-- 區域性滾動元件 --
>
<
!-- 您的業務dom --
>
for=
"index in 124"
:key=
"index"
>
}<
/li>
<
/ul>
<
/area-scroll>
// css
/deep/
.area-scroll
/**
* @module 針對ios滑動帶動webview觸控事件封裝
* @author ljxin
* @tips touch物件
* 私有變數 startx,starty
* 私有方法：_onmove,_onstart,_onend,_findparent
* 暴露方法: oninittouchevent onremovetouchevent
*/const touch =
else
if(math.
abs(distancex)
< math.
abs(distancey)
&& distancey <0)
// 1. 先判斷當前vue頁面下是否存在可滾動區域if(
!!document.
queryselector
('.area-scroll'))
}// 在cancalable為true得時候 來阻止冒泡及預設事件 及一定要return 不然會報個錯
if(e.cancelable)
return
null;}
, _onstart:
(e)=>
, _onend:
(e)=>
, _findparent:
(pnode, finaldirction)
=>
else
elseif(
math.
ceil
(curnodeparent.clientheight + curnodeparent.scrolltop)
== curnodeparent.scrollheight &&
finaldirction ===
'up'
)else}}
else}}
,};/**
* @func 暴露給vue使用的初始化介面
*/const
oninittouchevent=(
)=>);
document.body.
addeventlistener
('touchmove'
, touch._onmove,);
document.body.
addeventlistener
('touchend'
, touch._onend,);
};/** * @func 暴露給vue使用的解除安裝監聽介面
*/const
onremovetouchevent=(
)=>
,false);
document.body.
removeeventlistener
('touchmove',(
)=>
,false);
document.body.
removeeventlistener
('touchend',(
)=>
,false);
};export
;
Gesture 向上滑動，上下滑動
問題 解決方案 android中schrolling 主要包含兩中方式 dragging 拖動，fling 扔，區別在於速度上面。明顯此刻的需求要求使用fling.在onfling 方法中可以得到fling開始和結尾的x,y軸的位置，還有 扔 這個動作在x,y軸上的速度 velocity 注 螢幕的...
WebView禁止上下滑動
在工作中 我們經常會把後台傳回來的資料 用乙個webview顯示出來。我們需要固定webview的大小的時候,webview 雖然大小被固定了 但是當資料過多的的時候顯示不全，依然可以在固定的大小內上下滑動。但是如何禁止webview不可滑動呢？webview有幾個與滑動有關的方法都是無效的 web...
表頭左右滑動表體上下滑動
接下來我們來說 的滑動分為兩部分，分別是表頭滑動 表體滑動。1.表體滑動 表體其實很簡單，就是給表體乙個高度height，然後overflow y scroll 2.表頭滑動 表頭滑動的話就要在外邊設定兩個個div包裹 下面是表頭左右滑動的 table out table box table out...