2018-04-27 10:55:44 1254瀏覽
我們在進(jìn)行HTML5與APP混合開發(fā)的時候難免會遇到這樣或者是那樣的問題，今天小編就帶大家看一下扣丁學(xué)堂HTML5在線學(xué)習(xí)視頻教程講解的關(guān)于HTML5與APP混合開發(fā)遇到的問題及解決方法，對HTML5感興趣的小伙伴可以往下看。
問題1：頁面滾動條問題
問題描述：
web頁面在PC瀏覽器上瀏覽時有滾動條；但是，在移動端瀏覽器打開時，沒有滾動條
解決方法：
將頁面的最外層(我一般在寫頁面時，會在body標(biāo)簽內(nèi)寫一個大容器，用于存放頁面的內(nèi)容)設(shè)置overflow:auto/scroll;并且不能設(shè)置height屬性的值(height:100%也不行)
例子：
<body> <divstyle="overflow:scroll/auto;"> //網(wǎng)頁內(nèi)容 </div> </body>
問題2：touchstart和touchend事件的使用
問題描述：
引入touch.js文件，使用touchstart和touchend事件實現(xiàn)交互效果時，在部分手機(jī)出現(xiàn)事件觸發(fā)失效的問題[例如：低版本的榮耀手機(jī)]
解決方法：
方法1："removeEventListener"和"addEventListener"一起使用
方法2：添加e.preventDefault();阻止部分手機(jī)默認(rèn)跳轉(zhuǎn)
法3：Jquery的on實現(xiàn)事件綁定
說明：法1與法2都是原生JS使用addEventListener實現(xiàn)事件監(jiān)聽；并且dom元素使用touchstart和touchend事件時，需要結(jié)合事件綁定或者事件監(jiān)聽一起使用，否則js部分會拋出異常
代碼：
//法一：
document.getElementById('list5').addEventListener('touchstart',callback,false);
document.getElementById('list5').removeEventListener('touchstart',callback,false);
document.getElementById('list5').addEventListener('touchend',callback,false);
document.getElementById('list5').removeEventListener('touchend',callback,false);
//法二：
document.getElementById('list5').addEventListener('touchstart',function(e){
e.preventDefault();
},false);
document.getElementById('list5').addEventListener('touchend',function(e){
e.preventDefault();
},false);
問題3：長按閃退的問題
情景還原：
有一個XXX列表頁，長按列表頁的列表項時(觸摸到文字)，在低版本手機(jī)中會出現(xiàn)閃退的情況
解決方法：
js部分：在事件觸發(fā)時添加e.preventDefault();，用于阻止默認(rèn)行為
css部分：添加禁止文本文本復(fù)制的代碼
代碼：
//js部分： e.preventDefault(); //css部分： -webkit-touch-callout:none;//解決閃退 //禁止復(fù)制 -moz-user-select:none; -khtml-user-select:none; user-select:none;
以上就是扣丁學(xué)堂HTML5在線學(xué)習(xí)視頻教程中關(guān)于HTML5與APP混合開發(fā)遇到的問題及解決方法，由于文章篇幅問題就先給大家說這么多，想要了解更多內(nèi)容的小伙伴可以登錄扣丁學(xué)堂官網(wǎng)查詢。扣丁學(xué)堂是專業(yè)的HTML5培訓(xùn)機(jī)構(gòu)，不僅有專業(yè)的老師和與時俱進(jìn)的課程體系，還有大量的HTML5在線視頻供學(xué)員觀看學(xué)習(xí)哦?？鄱W(xué)堂H5技術(shù)交流群：559883758。
【關(guān)注微信公眾號獲取更多學(xué)習(xí)資料】
查看更多關(guān)于“HTML5開發(fā)技術(shù)資訊”的相關(guān)文章>>
全國免費咨詢熱線
郵箱：codingke@1000phone.com
官方群：148715490
返回頂部