5***@qq.com
5***@qq.com
  • 发布:2026-10-12 15:47
  • 更新:2026-10-12 15:47
  • 阅读:32

plus.nativeObj.View 可以拖拽

分类:uni-app

plus.nativeObj.View 可以拖拽效果的代码怎么写

2026-10-12 15:47 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

根据社区中的相关讨论,实现 plus.nativeObj.View 的拖拽效果,主要通过监听 touchstart 和 touchmove 事件,并在 touchmove 事件回调中调用 setStyle() 方法动态更新 View 的位置来实现。

以下是参考代码示例:

var nativeView = new plus.nativeObj.View('testNview', {  
  top: '300px',  
  left: (sreenWidth - 40) + 'px',  
  width: '40px',  
  height: '80px'  
});  

// View拖动监听  
nativeView.addEventListener("touchstart", function(event) {  
  flag = true;  
  var touch;  
  if (event.touches) {  
    touch = event.touches[0];  
  } else {  
    touch = event;  
  }  
  cur.x = touch.clientX;  
  cur.y = touch.clientY;  
});  

nativeView.addEventListener("touchmove", function(event) {  
  if (flag) {  
    var touch;  
    if (event.touches) {  
      touch = event.touches[0];  
    } else {  
      touch = event;  
    }  
    moveX = touch.pageX - cur.x;  
    moveY = touch.pageY - cur.y;  
    x = moveX;  
    y = moveY;  
    if (x < 0) {  
      x = 0;  
    } else if (x > (boxWidth - modelWidth)) {  
      x = sreenWidth - 40;  
    }  
    if (y < 0) {  
      y = 0;  
    } else if (y > (boxHeight - modelHeight)) {  
      y = (boxHeight - modelHeight);  
    }  
    nativeView.setStyle({  
      top: y + 'px',  
      left: x + 'px'  
    });  
  }  
});

本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

注意事项:
根据开发者反馈,plus.nativeObj.View 的 click 事件不能与 touchend 事件同时使用,且 touchend 经常不响应监听事件。如果需要同时区分点击和拖动操作,可以参考以下方案:在 touchstart 时记录触点的位置(如 screenX、screenY),在拖动结束时对比位置,如果位置一样则视为点击,不一样则视为拖动。

详细讨论可以参考以下社区问答:

此外,插件市场已有基于 plus.nativeObj.View 实现的可拖拽吸边悬浮按钮插件,如果需要现成功能也可以前往插件市场获取:安卓Webview页面悬浮按钮 可拖拽吸边

内容为 AI 生成,仅供参考

要回复问题请先登录或注册