账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    微信小程序touchstart 与自身屏幕滚动的冲突
    43
    0

    1.<view bindtouchstart="touchstart" bindtouchmove="touchmove" data-index="{{index}}" wx-for="{{items}}">{{item.name}}</view>
    2.代码如上 我的items是一个1000长度的数组,渲染到小程序上面,屏幕上下滑动会出发 touchstart而导致卡顿感,请大神赐教如何解决

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 微信小程序touchstart和自身屏幕滚动可能会出现冲突的情况。这是因为当用户触摸屏幕时,小程序的视图区域也会进行滚动。为避免这种冲突,您可以使用触摸事件的touchmove事件替代touchstart事件,或者在touchstart事件中判断屏幕是否滚动。

      例如,您可以使用以下代码替换以下代码:

      ```javascript let touchStart = false; let scrollX = 0; let scrollY = 0;

      touchStart = false;

      小程序.addEventListener('touchstart', function(e) { touchStart = true; e.preventDefault(); });

      小程序.addEventListener('touchmove', function(e) { if (touchStart) { scrollX = e.touches[0].clientX; scrollY = e.touches[0].clientY; e.preventDefault(); } });

      小程序.addEventListener('touchend', function(e) { touchStart = false; }); ```

      这段代码会在用户触摸屏幕时,阻止默认的触摸事件。当用户离开触摸区域时,该事件会触发,此时计算屏幕滚动的滚动距离。如果触摸开始,那么就计算屏幕滚动的距离,如果没有触摸开始,那么就返回默认的滚动距离。

      这样,就可以避免微信小程序touchstart和自身屏幕滚动的冲突。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部