微信小程序:movable-view

时间:2021-7-2 作者:qvyue

正常情况下,一个元素创建后,如果不使用js或者css动画,它是无法实现移动的,微信小程序加入了movable-view组件来实现,movable-view组件,是可以完成元素的移动的,但是这个容器必须放在movable-area中才能移动,因此实际上是这两个组件配合使用才能实现移动的效果的。

1、movable-view基本的使用

1.1、wxml代码:

direction是movable-view的移动方向,属性值默认的是none,属性值有all,vertical,horizontal等,inertia是movable-view是否带有惯性,即在拖动事件取消后是否还会往取消前的方向滑动一小段,out-of-bounds指的是当拖拽的元素超过移动的区域后,movable-view是否还可以移动。
movable-area指的是当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个movable-area

1.2、wxss代码:
.area {
  width: 100%;
  height: 200px;
  margin-top: 100px;
  overflow: hidden;
  background: bisque;
}
.view {
  width: 50px;
  height: 50px;
  background: blueviolet;
}
微信小程序:movable-view
movable-view拖动.gif

2、movable-view中damping阻尼系数的设置

damping指的在移动过程中,用来控制x或y改变时的动画和过界回弹的动画,值越大的话,移动的越快

2.1、wxml代码:

2.2、wxss代码:
.area {
  width: 100%;
  height: 200px;
  margin-top: 100px;
  overflow: hidden;
  background: bisque;
}
.view {
  width: 50px;
  height: 50px;
  background: blueviolet;
}
2.3、js事件
  onTap:function(){
    this.setData({
      x:100,
      y:200
    })
  },

damping为10:

微信小程序:movable-view
damping为10.gif

damping为200:

微信小程序:movable-view
damping为200.gif

3、movable-view中friction摩擦系数的设置以及双指缩放

3.1、设置摩擦系数wxml代码:

friction是摩擦系数,用于控制惯性滑动的动画,值越大摩擦越大,滑块停止的越快,默认值为2。


3.2、双指缩放的wxml代码:

scale指的是否支持双指缩放,默认缩放手势是控制在movable-view区域中,除非在area中设置了scale-area属性,scale-min是定义缩放倍数的最小值,scale-max是定义缩放倍数的最大值,scale-value定义缩放倍数,取值范围为0.5~10


4、movable-view的滑动事件的注意事项

htouchmove当一开始的时候手指触摸移动为横向的移动,则会触发此事件,这里是指的一开始的方向为横向,一旦一开始的方向非横向,则是被catch。
vtouchmove当一开始的时候手指触摸移动的方向为纵向则会触发此事件。

4.1、wxml代码
4.2、wxss代码
.view {
  width: 50px;
  height: 50px;
  background: blueviolet;
}

.overview {
  width: 50px;
  height: 50px;
  background: chartreuse;
}
4.3、js事件

当横向移动大于50px时触发样式修改

  onLoad: function (options) {
    this.setData({
      view:'view'
    })
  },
  onHTouchMove:function(event){
    var x = event.detail.x;
    if(x > 50){
      this.setData({
        view:'overview'
      })
    }
  },
微信小程序:movable-view
htouchmove事件触发.gif

纵向事件同样如此,这种事件一般用于做那种滑动删除,假期可以试下

5、movable-view的注意点!

movable-view必须设置width和height属性,不设置的话默认为10px,其次movable-view默认的是绝对定位,top和left属性均初始为0px,当movable-view小于movable-area时,movable-view的移动范围是在movable-area内。
movable-view必须在组件中,并且必须是直接子节点,否则不能移动.

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。