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

最新推荐文章于 2023-05-31 10:27:27 发布
VIP文章 最新推荐文章于 2023-05-31 10:27:27 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： 前端 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/supperi/article/details/109716101
版权

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

1、movable-view组件，正如他的名字一样，是可以移动的容器，但是这个容器必须要放在movable-area中才能移动。因此实际上是这两个组件配合使用才能实现移动的效果的。看以下示例代码：

wxml代码：

<movable-area class="area" scale-area>
  <movable-view class='view' direction="all" inertia out-
最低0.47元/天 解锁文章
左眼皮一直跳
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图文并茂演示小程序movable-view的可移动范围
m0_56069948的博客
07-23 665
表示元素可移动的区域，它决定元素移动的区域范围表示可移动的视图容器，它决定了什么元素可以移动使用上要求必须是的直接子节点，否则不能移动。这两个组件对于比较常规的可拖拽移动产品需求可以轻松应对，但是针对一些稍微复杂的需求，可能需要对他们的用法原理要进一步掌握理解。...
微信小程序新增拖动组件：movable-view
热门推荐
APPx应用魔方
05-23 2万+
小程序在520节日前夜，让程序员们又躁动了一把，更新了一些很诱人的功能，如内容转发API，iBeacon API，振动API，屏幕亮度调节API等，也增强了地图组件的功能
AVM 拖动组件 movable-view 介绍
ff_888888的博客
09-13 450
AVM 拖动组件 movable-view 介绍
uniapp通过movable-view实现元素拖动
weixin_36977678的博客
06-27 2131
uniapp通过movable-view实现元素拖动
原生微信小程序 实现鼠标拖拽的按钮效果
峰会路转的博客
12-01 1363
业务中需要实现鼠标拖拽一个按钮的功能，避免遮住页面中的内容，效果如下。
小程序实现拖拽功能
零度空间
08-24 3084
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-view移动图片和双指缩放
03-29
movable-view是小程序自定义的组件.其描述为:”可移动的视图容器，在页面中可以拖拽滑动”. 官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html. 值得注意的是文档中有一段备注:...
微信小程序新增的拖动组件movable-view使用教程
12-10
此次的更新中，也新增了一个UI组件，它就是视图组件movable-view，它需要配合movable-area来一起使用。简单来说，它就是一个支持在指定区域内可以拖动内容的容器。 我们来看一个简单的示例： <movable xss=removed>...
微信小程序 movable-view
03-29
微信小程序 movable-view       movable-view 是一个可移动的视图容器，在页面中可以拖拽滑动。     1.属性： 属性名 类型  默认值 说明 direction String  none movable-view的移动方向，属性值有all、...
微信小程序movable view移动图片和双指缩放实例代码
01-03
movable-area是微信小程序的新组件，可以用来移动视图区域movable-view。移动方向可选择任何、垂直和平行。可移动区域里包含其他文本、图片、按钮等组件。可移动区域可绑定touchend等事件。movable-view的参数可调整...
微信小程序移动拖拽视图-movable-view实例详解
10-16
主要介绍了微信小程序移动拖拽视图-movable-view的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
uni-app之使用movable-view组件的详细教程
码奴一只猿
05-31 2176
UniApp是一个基于Vue.js的跨平台开发框架，它可以让开发者使用Vue的语法编写一次代码，然后同时生成多个平台的应用程序，如小程序、H5、App等。在UniApp中，我们可以使用movable-view组件实现视图元素的拖动和移动功能。本文将详细介绍如何在UniApp中使用movable-view组件，并提供示例代码。
微信小程序图片流动动画效果（附代码，图）
qq_51297987的博客
03-18 6454
微信小程序图片流动动态效果代码方法
微信小程序 左右滑动切换页面（炫酷效果）以及点赞特效
星星之火 可以燎原
04-08 1万+
效果图 gif放不上来。。我就直接口述了。。需要看具体效果戳GitHub&gt;&gt;&gt;&gt;&gt;demo地址 首先左右滑动的时候整个页面会以动画效果切换（demo里是反转和水平淡出） 然后那个红色的小心心是点赞之后的状态，过程也是动画 划重点–大家一定用过animate.css，微信小程序里可以用ripples.wxss来代替，具体怎么用，取决于你 思路 滑动 ...
微信小程序css3动画怎么写,微信小程序CSS3动画下拉菜单效果
weixin_35867815的博客
08-03 278
微信小程序没有自带的下拉菜单组件，因此我们需要自己需要写一个思路利用列表来存储菜单项，在外面套一个view元素作为外框，将其设置为overflow：hidden，使用CSS3动画逐渐改变外层view元素的高度，当高度为0时，里面嵌套的列表元素被完全隐藏，相当于菜单关闭。而当view元素的高度大于列表元素的高度时，相当于菜单显示。效果图wxmlbutton按钮用于触发菜单的打开和关闭，first_c...
微信小程序学习第5周————movable-view（可移动视图区域--右滑删除效果）
潜心
09-30 6975
**Movable-view：**可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。 1、首先按要求创建movable-view组件，需包含在movable-area组件中 2、属性： direction：属性值有all(所有方向)、vertical(纵向)、horizontal(横向)、none(没有方向) Inertia:是否带有惯性（布尔） out-of-bounds：超过可移动区域后，movable-vie
解决movable-view拖拽组件问题
亱語的博客
07-19 8540
# 小程序 拖拽组件 ### 微信开发工具导入项目 新建项目 -&amp;amp;amp;gt; 导入src文件 -&amp;amp;amp;gt; 预览效果 ### 截图预览 组件代码 movable.wxml &amp;amp;amp;lt;movable-area class='movable-box'&amp;amp;amp;gt; &amp;amp;amp;
微信小程序 实现最简单的组件拖拽
q1076452761的博客
12-21 6416
背景 最近在自主学习微信小程序的开发；对于零基础入门(没有学习过前端)的我，查阅了许多微信小程序拖拽的实现，大部分要么实现起来太复杂了，要么封装组件太复杂了，附带了拖拽之后排序等功能；因此写下这篇个人觉得最好理解的 微信小程序元素拖拽的实现； 原理 这边采用了 微信小程序中的 bindtouchstart、bindtouchmove、bindtouchend 三兄弟 实现 开始触摸、触摸后移动、触摸结束；并加上一些坐标的转换，实现简单的 拖动功能； 第一步 touchStart 拖拽的开始 (一切尽在图中)
uniapp小程序中设置movable-view 位置
最新发布
06-01
可以通过设置movable-view组件的x和y属性来改变其位置。例如，如果想将movable-view组件移动到屏幕左上角，可以设置x和y属性为0： ```html <view> <movable-view x="0" y="0">这里是movable-view的内容</movable-view> </view> ``` 如果想将movable-view组件移动到屏幕中心，可以先获取屏幕宽度和高度，然后根据组件大小计算出应该设置的x和y值： ```html <view> <movable-view :x="(screenWidth - movableWidth) / 2" :y="(screenHeight - movableHeight) / 2">这里是movable-view的内容</movable-view> </view> ``` 其中，movableWidth和movableHeight分别表示movable-view组件的宽度和高度，可以通过CSS样式或动态计算得到；screenWidth和screenHeight分别表示屏幕的宽度和高度，可以通过uni.getSystemInfoSync()方法获取。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值