HTML 5を使用してiOSオリジナルアプリを構築(2)

1721 ワード

問題が発生したシーンはwebviewにフィルタがあり、私が(携帯電話で実際にタッチしている)フィルタをクリックすると、ページの内容が変わりますが、完全にローカルで、データ転送などは関係ありません.
今回解決する体験問題は、クリックイベントが発生するとページが点滅することです.
研究の結果、解決策はclickイベントに対するバインドをtouchendに置き換えることであることが分かった.
tagdom.addEventListener('click',function(ev){
	...
}

置換先:
tagdom.addEventListener('touchend',function(ev){
	...
}

コードは簡単ですが、新しい問題が発生しました.セレクタを押すと、急に注文したくなくなり、指を滑らせて放します.私の予想はもちろんイベントがキャンセルされたが、touchendは実行され、ev.targetは依然として前の要素である.
touchmoveイベントが発生したかどうかを検出し、解決策を生み出す必要があります.
var isScrolling = false;
window.addEventListener('touchstart', function () { isScrolling = false; });
window.addEventListener('touchmove', function () { isScrolling = true; })

指がスライドしたかどうかを示す変数isScrollingがあります.スライドが発生していなければ、touchendが有効になります.
tagdom.addEventListener('touchend',function(ev){
	if(isScrolling == false){
		...
	}
}

ページが点滅しなくなりました.
今日解決しなければならない問題は、HTML 5を使って作成(webview)するとき、垂直スクロールバーが出てくると、指がページをスライドしてスクロールした後、スクロールがすぐに止まり、ブレーキを踏んで運転しているようで、「スクロールが大変」な感じがします.オリジナルのUItableViewなどのスクロールは非常に速い.
私が前に考えた理由は、ブラウザがwebviewをレンダリングする再描画が非常に困難である可能性があります.例えば、絶対的な位置決め、華麗なCSSなどです.iOSシステムは、スクロール速度を低下させ、webviewスクロール時のFPSを強化することを選択しました.
実際にはそうではありません.シーンが異なるためか、アップルはユーザーがページを閲覧する際に、ページのスクロールをそんなに速くしなくてもいいと考えているので、webviewに対してより高い「減速率」、つまりscrollViewのdecelerationRate属性を設定しました.
HTML 5でアプリケーションを作成する場合は、UItableViewなどのオリジナルコンポーネントのスクロール速度をシミュレートしたいので、コードは簡単です.
//      
self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;