小程序moveable-area和movealbe-view有什么区别

发布时间:2022-03-15 10:40:47 作者:小新
来源:亿速云 阅读:242

这篇文章主要为大家展示了“小程序moveable-area和movealbe-view有什么区别”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“小程序moveable-area和movealbe-view有什么区别”这篇文章吧。

一. movable-area

movable-view的可移动区域。

二. movalbe-view

可移动的视图容器,在页面中可以拖拽滑动

  1. 注意点


  1. movable-view必须设置width和height。不然就会默认为10px.

  2. movable-view必须在<movable-area/>组件中,并且必须是直接子节点,否则不能移动

  3. movable-view 默认为绝对定位,top和left属性为0px

  4. 当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;

  5. 当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑)

三. 可运行的代码

wxml


  1. <view class='container'>

  2. <view class="section_title_less"> movable-view区域小于movable-area </view>

  3. <movable-area class="area_less" scale-area>

  4. <movable-view class="view_less" direction="all" scale inertia out-of-bounds x="{{x}}" y="{{y}}" damping="1" friction="200" bindchange="change" bindscale="scale"></movable-view>

  5. </movable-area>

  6.  

  7. <view class="section_title_more"> movable-view区域大于movable-area </view>

  8. <movable-area class="area_more" scale-area>

  9. <movable-view class="view_more" direction="all">

  10. <text>可移动的view</text>

  11. </movable-view>

  12. </movable-area>

  13. </view>

wxss


  1. .container {

  2. display: flex;

  3. flex-direction: column;

  4. align-items: center;

  5. }

  6.  

  7. .section_title_less {

  8. font-size: 28rpx;

  9. }

  10.  

  11. .area_less {

  12. height: 200px;

  13. width: 200px;

  14. background-color: red;

  15. }

  16.  

  17. .view_less {

  18. height: 50px;

  19. width: 50px;

  20. background-color: yellow;

  21. }

  22.  

  23. .section_title_more {

  24. font-size: 28rpx;

  25. margin-top: 50px;

  26. }

  27.  

  28. .area_more {

  29. height: 50px;

  30. width: 50px;

  31. background-color: red;

  32. }

  33.  

  34. .view_more {

  35. height: 200px;

  36. width: 200px;

  37. border-color: green;

  38. border-width: 2px;

  39. border

js


  1. Page({

  2. /**

  3. * 页面的初始数据

  4. */

  5. data: {

  6. x: "100px",

  7. y: "10px"

  8. },

  9.  

  10. /**

  11. * 生命周期函数--监听页面加载

  12. */

  13. onLoad: function (options) {

  14. },

  15. change: function (event) {

  16. // console.log(event);

  17. },

  18. scale: function (event) {

  19. // console.log(event);

  20. },

  21. vtouchmove: function (event) {

  22. console.log("纵向");

  23. },

  24. htouchmove: function (event) {

  25. console.log("横向");

  26. }

  27. })

以上是“小程序moveable-area和movealbe-view有什么区别”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 公众号与小程序有什么区别?小程序和APP有什么区别?
  2. 小程序和H5、app、公众号、有什么区别?

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序 moveable-area movealbe-view

上一篇:微信小程序视图容器movable-area怎么用

下一篇:php如何实现aes加密

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》