微信小程序之视图容器movable-view实现拖拽功能

最新推荐文章于 2025-05-26 20:09:54 发布

_轻舟

最新推荐文章于 2025-05-26 20:09:54 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_44836808/article/details/106312754

本文简单使用视图容器movable-area和movable-view实现了简单的拖拽功能。
参考文档：
movable-area
movable-view

实现效果：

代码：

wxml

    <movable-area class="movable-area">
      <!-- 可以任意拖拽 -->
      <movable-view class="movable-view"
                    direction="all"
                    scale="true">

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_轻舟

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序使用movable-view实现拖动效果

improvement

11-16

1586

微信小程序使用movable-view实现拖动效果 1、movable-view组件，正如他的名字一样，是可以移动的容器，但是这个容器必须要放在movable-area中才能移动。因此实际上是这两个组件配合使用才能实现移动的效果的。看以下示例代码： wxml代码： <movable-area class="area" scale-area> <movable-view class='view' direction="all" inertia out-of-bounds damping=

微信小程序实现拖拽功能

12-30

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

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

小程序实现拖拽功能

前端_李嘉豪

09-23

2076

<view class='collectBox' bindtap='addCollect' wx:if="{{write[0]+write[1] > 0}}" bindtouchmove="touchmove" catch:touchmove style="left:{{write[0]}}px;top:{{write[1]}}p...

基于 uni-app + ＜movable-view＞拖拽实现的标签排序-适用于微信小程序、H5等多端

最新发布

m0_52952413的博客

05-26

586

本文介绍了在微信小程序中使用Vue3+uni-app实现标签拖拽排序的方案。核心是使用movable-view组件实现拖拽功能，通过计算Y坐标变化确定新位置。主要步骤包括：1)初始化设置每项y坐标；2)通过touchstart/change/touchend事件管理拖拽状态；3)拖动时计算目标位置并交换数组项；4)结束拖动后重置y坐标并同步到后端。代码示例展示了完整的实现，包括模板结构、事件处理和样式设置，实现了用户体验良好的拖拽排序功能。

微信小程序_(组件)可拖动movable-view

weixin_30532369的博客

03-30

1261

　　微信小程序movable-view组件官方文档　　传送门　　　　Learn 　　　　一、moveable-view组件一、movable-view组件　　direction：movable-view的移动方向，属性值有all、vertical、horizontal、none【默认值none】　　使用<movable-view>组件...

基于movable-view的微信小程序拖拽排序（含源码）

m0_64130892的博客

03-05

4808

最近在做一个账本，里面有个功能需要“拖拽排序”，网上的代码我也看不太懂，打算自己写一个。微信小程序官方给了一个可移动的盒子movable-view ，基于这个我们来实现一个简单的拖拽排序功能。可以自定义一行展示多少个图标，下面演示一行五个的情况。由于这是我花三个小时写出来的，肯定存在很多不足，欢迎在评论区里不吝赐教！

微信小程序移动拖拽视图-movable-view实例详解

10-16

在本篇详解中，我们将会深入探讨movable-view组件的实例代码，以及如何在微信小程序中使用该组件实现拖拽功能。 ### movable-view组件基本使用 movable-view组件位于微信小程序的wxml文件中，用于创建可以移动的...

微信小程序movable-view移动图片和双指缩放

03-29

movable-view是小程序自定义的组件.其描述为:”可移动的视图容器，在页面中可以拖拽滑动”. 官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html. 值得注意的是文档中有一段备注:...

微信小程序 movable-view

03-29

微信小程序 movable-view movable-view 是一个可移动的视图容器，在页面中可以拖拽滑动。 1.属性：属性名类型默认值说明 direction String none movable-view的移动方向，属性值有all、...

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

12-10

小程序在520节日前夜，让程序员们又躁动了一把，更新了一些很诱人的功能，如内容转发API，iBeacon API，振动API，屏幕亮度调节API等，也增强了地图组件的功能。此次的更新中，也新增了一个UI组件，它就是视图组件...

微信小程序代码实现：拖拽排序列表

06-21

利用movable-view， movable-area实现小程序拖拽功能。

简单实现小程序view拖拽功能

weixin_30367873的博客

08-17

631

此代码只是简单实现了view的拖拽方法是利用绝对定位，以及使用catchtouchmove 事件，动态改变绝对定位的高度。 JS数据代码 data: { ViewArr:[ ['red','0rpx'], ['blue', '110rpx'], ['Pink', '220rpx'], ['Mediu...

小程序实现拖拽功能原来这么简单？？

SuperJane_123的博客

01-27

1697

我们公司是做商城项目的，试问当页面有一个悬浮窗的快捷功能时，本意是让用户操作更方便的，由于悬浮窗会挡住页面部分元素，导致你要点击某个目标时点击范围变小，操作体验不友好....用户心里可能在想：这个破东西挡住了，拖拽又拖不了，怎么搞的.... 不买了，生气（︶^︶）4.使用微信提供的组件，视图区高度减掉了130的高度，是因为tabbar的高度，拖拽范围不能超过tabbar。，因为这是用户最直观能感受到的东西，交互没做好，我认为是一定程度上影响到用户下单决定，影响业绩的。前端的交互是很重要的。

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

q1076452761的博客

12-21

7263

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

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

m0_62670368的博客

03-15

2067

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

微信小程序movable-view实现移动与双指缩放详解

“微信小程序movable view移动图片和双指缩放实例代码，通过使用movable-area和movable-view组件实现视图移动和双指缩放功能。” 在微信小程序开发中，`movable-area`和`movable-view`是两个非常重要的组件，用于...