[微信小程序] movable-view 可移动视图容器 - 范围问题

1年前作者：Voices_分类：Toy博客阅读(11)违法举报

这篇具有很好参考价值的文章主要介绍了[微信小程序] movable-view 可移动视图容器 - 范围问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

movable-view 可移动视图容器

可移动视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点

<view>
  <movable-area style="width: 750rpx;height: 200rpx;background-color: gainsboro;">
    <movable-view direction="all"> 移动我 </movable-view>
  </movable-area>
</view>

运行效果：

[微信小程序] movable-view 可移动视图容器 - 范围问题,微信小程序,小程序

发现文字超出了移动区域的问题，去查阅了文档，发现这个默认是不允许超出的

[微信小程序] movable-view 可移动视图容器 - 范围问题,微信小程序,小程序

问题原因：没有给 movable-view设置宽高，所以它自动设置了宽高，所以视觉上，“移动我”三个字，超出了移动范围，话不多说，看图。

[微信小程序] movable-view 可移动视图容器 - 范围问题,微信小程序,小程序

看到蓝色方块了吧，

所以解决方法就是给movable-view设置宽高，并且out-of-bounds保持是false（默认）文章来源地址https://www.toymoban.com/news/detail-561291.html

到了这里，关于[微信小程序] movable-view 可移动视图容器 - 范围问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

微信小程序缩放图片与滑动图片：movable-view与swiper一起使用所产生的手势冲突的基本解决方案（操作过于频繁还是会出现问题，基本的使用是没有问题的）
1.一些参数和需要用到的方法js代码注释都有了，只要复制过去看就好了 2.怎么解决这个手势冲突呢，我采用的是mina-touch插件，去监听这两种手势，当双指在的时候，长按事件就不触发，滑动的时候长按事件也要阻止，因为在不停的滑动的时候，也会长按，大概就是这么一个
2024年02月15日
浏览(26)
滑动验证组件---设置movable-view组件的x属性在微信小程序端失效的问题
采用uniapp的movable-view组件实现滑动验证组件。流程滑块未滑到最右端时，回弹到原点滑块滑到最右端时，则显示滑动结束，不可再滑动频繁设置uniapp的movable-view组件的x属性，在H5端正常，但在微信小程序端则失效。 index.vue woSlider.vue H5端微信小程序端官方给出的解释：由
2024年02月11日
浏览(12)
Flex布局简介及微信小程序视图层View详解
目录一、Flex布局简介什么是flex布局？ flex属性基本语法和常用属性 Flex 布局技巧二、视图层View View简介微信小程序View视图层 WXML 数据绑定列表渲染条件渲染模板 WXSS 样式导入内联样式选择器全局样式与局部样式 WXS 示例注意事项页面渲染数据处理 Flex 布局（又称
2024年02月20日
浏览(11)
【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper（六）
💌 所属专栏：【微信小程序开发教程】 😀 作者：我是夜阑的狗🐶 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享，欢迎咨询！ 💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘 大家好，又见面了，
2024年01月18日
浏览(51)
微信小程序 movable-area 区域拖动动态组件演示
movable-area 组件在小程序中的作用是用于创建一个可移动的区域，可以在该区域内拖动视图或内容。这个组件常用于实现可拖动的容器或可滑动的列表等交互效果。使用 movable-area 组件可以对其内部的 movable-view 组件进行拖动操作，可以通过设置不同的属性和事件来自定义拖动
2024年02月03日
浏览(12)
微信小程序通过 movable-area 做一个与vuedraggable相似的上下拖动排序控件
因为只是做个小案例我就直接代码写page页面里了其实很简单组件稍微改一下就好了 wxss 就是很普通的样式编写 js代码我的注释还是写的非常认真的大家可以好好读一读然后 wxml 没什么特别的就是渲染一下list 这样我们就做了一个可以上下拖动元素排序的小案例了效果也
2024年02月07日
浏览(15)
【微信小程序】动态添加view
背景：想做一个点击按钮添加分类的功能，涉及到动态的添加view。先上效果图关键： 1、使用 wx:for 指令基于一个数组来渲染列表。 2、使用 this.setData 来更新数据。微信小程序是单向数据流 Model ---- View ，如果我们写 this.data.typeList.push(\\\'新的\\\') ，那么只有data里的typeList会更
2024年02月04日
浏览(10)
08-微信小程序视图层
08-微信小程序视图层框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language) 用于描述页面的结构。 WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML ，可以构建出页面的结构。 WXSS(We
2024年02月11日
浏览(8)
微信小程序 - 视图与逻辑介绍
什么是页面导航在小程序开发中，页面导航是指在不同页面之间进行切换的过程。通过页面导航，用户可以在小程序中流畅地浏览不同的内容和功能模块。小程序中实现页面导航的两种方式在小程序中，实现页面导航有两种主要方式：声明式导航和编程式导航。 1、页面导
2024年01月17日
浏览(13)
微信小程序 scroll-view
微信官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 微信小程序 scroll-view 提示：以下是本篇文章正文内容，下面案例可供参考可滚动视图区域。代码如下（示例）：提示：css 提示：scroll-view 属性提示：设置自定义下拉刷新区域背景颜色
2024年02月11日
浏览(49)