javascript - 想问一个js改变文本内容的时候在手机端比较卡顿的问题
PHPz
PHPz 2017-04-11 11:59:56
0
2
279

如图,我要实现点击数字按钮就在金额后面显示。

按键代码如下:

1 2 3
4 5 6 确认
支付
7 8 9
0 .

用click发现在iphone端非常卡顿,于是我就选择在touchstart事件触发的时候执行。

$("td:not([data-value=pay])").on('touchstart',function(){ var money = $("#money").text(),newMoney; var val = $(this).data('value'); if(val == 'del'){ newMoney = money.substring(0,money.length-1); }else{ if(money.length > 5){ return false; } newMoney = money + val; } $('#money').text(newMoney); })

基本上卡顿的效果不明显了,但是在支付宝钱包客户端里面显示依旧是十分卡顿,不灵敏,体验感超差,主要是iphone客户端,我测试的是iphone6 ,6s,还有6plus,6s相对好一点,其他都很卡顿,这是什么原因呢?在微信端还是十分流畅的,好蛋疼啊。

PHPz
PHPz

学习是最好的投资!

membalas semua (2)
黄舟

我也和楼主遇到了同样的问题 搞了好久,终于解决了。
首先,楼主放弃click而用touchstart是正确的。然后我也遇到了在支付宝界面卡顿的情况,发现只要在touchstart事件后加个e.preventDefault();这个阻止就好。就不卡顿了。



    收款  
  

饭跑跑11

1 2 3 删除
4 5 6 微信支付
7 8 9
键盘 0 .




  • {margin: 0;padding: 0;font-family: "microsoft yahei"; -webkit-touch-callout: none; -webkit-user-select: none;}
    input{ -webkit-user-select: auto;}

ul li{ list-style: none;}
body{ background: #EFEFEF;}

.title{ width: 100%; font-size: 20px; color: #333; height: 40px; line-height: 40px; text-align: center; padding:25px 0;}
.title img{ width: 40px; height: 40px; border-radius:40px; display: inline-block;}
.title .sp1{ display: inline-block; height: 50px; line-height:52px; position: relative; top:-10px; left:5px;}
.row{ display:block; width: 90%; height: 50px; line-height: 52px; background: #fff; border: 1px solid #A6A5AA; border-radius:5px; margin:0 auto; padding: 0 1%}
form{ overflow: hidden;}
form label{ width: 21%; font-size: 16px; float: left; color: #646368;}
form #money{ width: 75%; float: right; height: 50px; border: none; line-height: 52px; text-align: right; font-size: 18px; outline: none;}

money:disabled{ background:#fff; color: #000;}

table{ background: #fff; position: absolute; bottom: 0px; border-top: 1px solid #E2E2E2; border-left: 1px solid #E2E2E2; border-right: 1px solid #E2E2E2; box-sizing:border-box}
td{ width:25%; border-bottom: 1px solid #E2E2E2; height: 55px; border-collapse:collapse; border-right: 1px solid #E2E2E2; box-sizing:border-box; text-align: center; line-height: 55px; background: #fff;}
.sure{ height: 168px; background: #BCBCBC;}
.del img{ position: relative; top:5px}
.keyset img{ position: relative; top:7px}

clickme span{ display: block; color: #fff; height: 25px; line-height: 25px;}

clickme img{ position: relative; top:3px}

td:active{ background: #ccc; color: #fff;}
.green{ background:#08BC05;}

附上我的代码和css,为了解决这个问题真的搞了大半天。

    左手右手慢动作
    1. 按照你页面的复杂度,代码量应该不多,或者是其他代码引起的

    2. 没有必要给每个td都绑定touch事件,使用事件代理给input-number绑一个就好了

    3. 把变量缓存起来,比如$(#money)节点

      Muat turun terkini
      Lagi>
      kesan web
      Kod sumber laman web
      Bahan laman web
      Templat hujung hadapan
      Tentang kita Penafian Sitemap
      Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!