小程序模板网

微信小程序 movable-view

发布时间:2017-12-15 08:52 所属栏目:小程序开发教程

微信小程序 movable-view

 
 
 

movable-view 是一个可移动的视图容器,在页面中可以拖拽滑动。

 

 

1.属性:

属性名 类型   默认值   说明
direction String  none movable-view的移动方向,属性值有all、vertical、horizontal、none
inertia Boolean  false movable-view是否带有惯性
out-of-bounds Boolean  false 超过可移动区域后,movable-view是否还可以移动
x Number   定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画
y Number   定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画
damping Number  20 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快
friction Number  2 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值

2.用法:

简单示例1:

 
[html] view plain copy
 
  1. <movable-area style="height: 300rpx;width: 300rpx;background: blue;">  
  2.     <movable-view direction="all" style="height: 100rpx; width: 100rpx; background: yellow;">  
  3.      </movable-view>  
  4. </movable-area>  
我们用movable-area设定了一个300x300大小的一个可拖动区域(蓝色),然后在这个区域内放置了一个大小为100x100的可以拖动内容movable-view(黄色),可拖动内容的direction设置为all,即可以在任意方向上进行拖动。

 

效果如图:

简单示例2:

 

[html] view plain copy
 
  1. <movable-area style="height: 600rpx;width: 600rpx;background: blue;">  
  2.       <!--黄色可以任意二维方向拖动内容-->  
  3.       <movable-view direction="all" style="height: 100rpx; width: 100rpx; background: yellow;">  
  4.       </movable-view>  
  5.       <!--红色只能横向拖动内容-->  
  6.       <movable-view direction="horizontal" x="100" y="0" style="height: 100rpx; width: 100rpx; background: red;">  
  7.       </movable-view>  
  8.        <!--绿色只能竖向拖动内容-->  
  9.       <movable-view direction="vertical"  x="0" y="100"  style="height: 100rpx; width: 100rpx; background: #0f0;">  
  10.       </movable-view>  
  11.        <!--白色不能拖动内容-->  
  12.       <movable-view direction="none"  x="100" y="100"  style="height: 100rpx; width: 100rpx; background: #fff;">  
  13.       </movable-view>  
  14. </movable-area>  

 

我们沿用movable-area设定了一个300x300大小的一个可拖动区域(蓝色),然后在这个区域内分别放置了4个一个大小为100x100的可以拖动内容movable-view,

其中 黄色 可拖动内容的direction设置为all,           即 可以在任意方向上进行拖动;

        红色 可拖动内容的direction设置为horizontal,  即 只能横向进行拖动;

        绿色 可拖动内容的direction设置为vertical,      即  只能竖向进行拖动;

        白色 可拖动的direction设置为none,                即  不能拖动。

效果如图:

 

注意:

movable-view 必须设置width和height属性,不设置默认为10px movable-view 默认为绝对定位,top和left属性为0px 当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑)

参考链接:https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html

在具体项目中,可以优化页面效果,增加各种监听事件。应用的话如做个拼图游戏等,仅以举个栗子,抛装引玉,欢迎留言交流指正!



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18164.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询