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

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

原创

最新推荐文章于 2025-05-26 20:09:54 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了如何在微信小程序中利用movable-view和movable-area组件来实现拖动效果。通过示例代码展示wxml和wxss的使用，并提供了官方文档链接以获取更多movable-view的属性信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序使用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

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

左眼皮一直跳

关注关注

0
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

weixin_44836808的博客

05-24

1258

本文简单使用视图容器movable-area和movable-view实现了简单的拖拽功能。参考文档： movable-area movable-view 实现效果：代码： wxml <movable-area class="movable-area">  <movable-view class="movable-view" direction="all" .

微信小程序（游戏）----拖拽拼图（拖拽和切换功能的实现）

liNewman的博客

03-15

1391

微信小程序（游戏）----拖拽拼图（拖拽和切换功能的实现）效果图 touchstart 获取当前触摸位置的坐标（x，y）；记录触摸点下view的各项坐标值；记录触摸点下view的起点坐标，背景坐标，以及触摸点的坐标；设置拖拽view为显示状态、设置起始坐标以及背景坐标为记录对应个...

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

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

weixin_30532369的博客

03-30

1261

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

基于 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坐标并同步到后端。代码示例展示了完整的实现，包括模板结构、事件处理和样式设置，实现了用户体验良好的拖拽排序功能。

微信小程序手指拖动出现滑动下拉效果

爬楼梯的前端小白的博客

07-03

1102

该效果类似于电商小程序左侧滑动下拉的效果 scroll-y属性：允许纵向y轴滑动 scroll-x属性：允许横向x轴滑动注意！使用竖向滚动时必须给scroll-view一个固定高度制作滚动效果图 wxml部分： <scroll-view class="gundong" scroll-y> <view>a</view> <view>b</view> <view>c</view> </scro

原生微信小程序 实现鼠标拖拽的按钮效果

峰会路转的博客

12-01

1591

业务中需要实现鼠标拖拽一个按钮的功能，避免遮住页面中的内容，效果如下。

微信小程序css3动画怎么写,微信小程序CSS3动画下拉菜单效果

weixin_35867815的博客

08-03

338

微信小程序没有自带的下拉菜单组件，因此我们需要自己需要写一个思路利用列表来存储菜单项，在外面套一个view元素作为外框，将其设置为overflow：hidden，使用CSS3动画逐渐改变外层view元素的高度，当高度为0时，里面嵌套的列表元素被完全隐藏，相当于菜单关闭。而当view元素的高度大于列表元素的高度时，相当于菜单显示。效果图wxmlbutton按钮用于触发菜单的打开和关闭，first_c...

微信小程序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、...

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

06-21

`movable-view`和`movable-area`是微信小程序为开发者提供的用于实现拖动效果的内置组件。`movable-area`是一个可移动区域，它包含了一个或多个`movable-view`。当用户在`movable-area`内触摸并移动`movable-view`时...

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

12-10

此次的更新中，也新增了一个UI组件，它就是视图组件movable-view，它需要配合movable-area来一起使用。简单来说，它就是一个支持在指定区域内可以拖动内容的容器。我们来看一个简单的示例： <movable xss=removed>...

微信小程序movable-area

业余爱好者易伟的专栏

07-25

4588

movable-area是微信小程序的新组件，可以用来移动视图区域movable-view。移动方向可选择任何、垂直和平行。可移动区域里包含其他文本、图片、按钮等组件。可移动区域可绑定touchend等事件。movable-view的参数可调整动画效果。本次小程序实现两个按钮的拖动互换，垂直移动。wxml如下：客服哥哥客服妹妹

小程序实现拖拽功能

零度空间

08-24

3206

timg.jpg 小程序实现拖拽：movable-area和movable-view必须搭配使用才可以实现 1.movable-area必须设置W和H，默认为10px 2.movable-view小于movable-area时，movable-view的移动范围是在movable-area内 3.direction一共有4个属性：all、vertical、horizon...

微信小程序组件 movable-area，实现小图标，在窗口中来回拖动

elementFei的博客

05-10

6081

需求： 微信小程序中，一张小图标，可以在窗口中来回拖动。解决方法：使用小程序的movable-area组件， <movable-area class="movableArea"> <movable-view class="movableView" style="height: 50rpx; width: 50rpx; background: ...

微信小程序movable-area的使用（会移动的小黄点）

lily_808的博客

03-09

4308

1：movable-area要和movable-view组合起来使用 2：这里分享一个小例子 wxml代码 js代码在页面里面通过设置movable-area的宽度和高度及背景色使其显示出来，同时设置movable-view的宽度高度和border-radius使其显示为一个小黄球在js逻辑文件中，定义一个tap函数，用户在视图页面点击按钮，执行tap函数函数生成一个随机数，使得小球在点击...

小程序view（块）可拖动

weixin_44401989的博客

03-21

3685

这几天突然需要用到view拖动，在网上找了一圈也没找到，最后找到一个排序拖动给了我灵感 wxml： <view bindtouchend='endOfTouch' bindtouchstart="moveStart" bindtouchmove='slide' bindtap='closeAnswerAnswer' data-gid="2"> //moveStart 开...

微信小程序动画效果方法封装

分享前端工程化、动效魔法与性能之舞！

06-15

1495

微信小程序的动画如何实现？归纳起来主要有以下几步，下面通过代码来一一说明。首先需要在wxml中为需要添加动画的元素绑定动画属性，如下所示： <image animation="{{animationData}}" bindtap="bindViewTap" src="{{userInfo.avatarUrl}}"></image> 说明：animation与js里......

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

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