微信小程序开发之拖拽 image 触摸事件监听

最新推荐文章于 2024-08-12 10:10:13 发布

dzp_coder

最新推荐文章于 2024-08-12 10:10:13 发布

阅读量1.6w

点赞数 1

分类专栏：微信小程序微信小程序开发文章标签：微信小程序拖拽拖放触摸事件监听

本文链接：https://blog.csdn.net/qq_31383345/article/details/53175005

版权

本文介绍了如何在微信小程序中实现拖拽image的功能，通过监听触摸事件获取位移，并设置image的位置，确保其浮在scroll-view之上，同时讨论了Android中类似的操作和思路。

摘要由CSDN通过智能技术生成

需要做个浮在scroll-view之上的button.尝试了一下.

上GIF:

Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标.

1.index.wxml

<image class="image-style" src="../../images/gundong.png" bindtap="ballClickEvent" style="bottom:{
  {ballBottom}}px;right:{
  {ballRight}}px;" bindtouchmove="ballMoveEvent"> 
</image>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dzp_coder

关注关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
14
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序 实现拖拽事件监听实例详解

09-01

在微信小程序中，实现拖拽事件监听是提升用户体验的关键技术之一，特别是在构建交互性强的应用时。本文将深入探讨如何在微信小程序中实现这一功能，并通过一个具体的实例来讲解。首先，拖拽事件监听通常涉及到以下...

微信小程序实现拖拽 image 触摸事件监听的实例

01-03

微信小程序实现拖拽 image 触摸事件监听的实例需要做个浮在scroll-view之上的button.尝试了一下. 实现效果图： Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标. 1.index.wxml <image class=image-style src=../../images/gundong.png bindtap=ballClickEvent style=bottom:{{ballBottom}}px;right:{{ballRight}}px; bindtouchmove=ballMoveEvent

14 条评论您还未登录，请先登录后发表或查看评论

微信小程序实现图片的拖拽移动

m0_62670368的博客

03-15

1103

本文将手把手教你制作如何拖动图片，以及增加限制防止拖出界面外，以及在界面中输出图片的先后位置。

微信小程序写一个可以左右拖拽滑动选择范围的组件

最新发布

w807139809的博客

08-12

266

微信小程序写一个可以左右拖拽滑动选择范围的组件

微信小程序中的拖拽和缩放图片功能

迷迷糊糊，懵懵懂懂

12-29

1956

在现代的移动应用开发中，拖拽和缩放功能变得越来越重要。它们不仅使应用程序更具交互性，还为用户提供了更直观、更高效的使用体验。微信小程序作为一个流行的开发平台，也提供了这样的功能。以下是在微信小程序中实现拖拽和缩放图片的步骤和注意事项。

微信小程序 图片缩放拖动

08-21

微信小程序图片缩放拖动，亲测可用（别人写的，拿来分享下）。因为小程序程序包大小有限制，把两个gif图片删除就行了，删除不影响使用

微信小程序长按拖拽排序

m0_55969466的博客

01-02

2789

微信小程序长按拖拽排序。

微信小程序开发图片拖拽实例详解

08-30

这个实例展示了微信小程序中实现图片拖拽的基本步骤，包括监听触摸事件、计算新的坐标以及更新数据。在实际应用中，可能还需要考虑更多细节，如图片缩放、边界检测等。如果你有更复杂的需求或者有更好的实现方式，...

微信小程序实现拖拽功能

12-30

0}} bindtouchmove=touchmove catch:touchmove style=left:{{write[0]}}px;top:{{write[1]}}px;> // pages/cateDetaile/cateDetaile.js const app = getAp

微信小程序 - 浮动按钮拖动功能

jerry_0_0的博客

11-08

966

小程序浮动按钮拖动功能在开发过程中无意间想到了这个功能。一番查询之后找到这个功能相关的代码片段。拷贝过来之后各种报错，经过自己的整改以可以使用。功能图片：中间的微信按钮可以拖动 //.js 页面代码 Page({ data:{ // 浮动按钮样式 buttonTop: 0, buttonLeft: 0, windowHeight: '', w...

微信小程序实现图片拖拽代码与讲解视频

03-26

此学习资源很详细，不仅有微信小程序的代码，代码我都加入了注释，更有配套讲解视频！如果有对微信小程序感兴趣的小伙伴，可以下载资源进行观看。

微信小程序新增的拖动组件movable-view使用教程

08-30

主要给大家介绍了微信小程序最近新增的拖动组件movable-view的简单使用教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。

微信小程序实现长按拖拽排序左滑删除DragSort-master-master.zip

09-25

微信小程序实现长按拖拽排序左滑删除DragSort-master-master.zip

小程序拖拽排序，拿来即用

12-04

该代码涉及到多层算法，支持微信小程序拖拽排序及H5js拖拽排序，拿来即用。

微信小程序：使用拖动（touchstart、touchmove、touchend）以及 scroll-view 实现下拉加载上一项导航，上拉加载下一导航功能；

qq_43233137的博客

02-25

4114

页面大致页面布局  <view class="wrap"> <view class="shop-search"> <view class="search-box"> <image src="/images/search.png"></image&gt...

微信小程序 实现最简单的组件拖拽

q1076452761的博客

12-21

6746

背景最近在自主学习微信小程序的开发；对于零基础入门(没有学习过前端)的我，查阅了许多微信小程序拖拽的实现，大部分要么实现起来太复杂了，要么封装组件太复杂了，附带了拖拽之后排序等功能；因此写下这篇个人觉得最好理解的 微信小程序元素拖拽的实现；原理这边采用了 微信小程序中的 bindtouchstart、bindtouchmove、bindtouchend 三兄弟实现开始触摸、触摸后移动、触摸结束；并加上一些坐标的转换，实现简单的拖动功能；第一步 touchStart 拖拽的开始 (一切尽在图中)

微信小程序之可拖动悬浮按钮的实现