和官方文档一起食用,效果更佳 —— 传送门

一、movable-view 初体验

1.1 项目展示

movable-view,从字面意思上就可以理解,可以移动的组件,具体是什么样的呢,看下面的效果图
在这里插入图片描述这是微信独有的一个模块,标签有两类

  • movable-area 是父容器
  • movable-view 是子容器
    并且,子容器必须在父容器当中,否则不能移动

1.2 项目源码

  1. index.wxml
  <movable-area class='area' > 
    <movable-view class='a'  direction='all' inertia out-of-bounds="{{false}}" x="{{x*2}}rpx" y="{{y*2}}rpx" damping='30' friction="30">
       我是红色
    </movable-view>
  </movable-area>
   <button bind:tap="areaEvent">按钮</button>

框架主要是上面说到的两种框架,大多数属性都是属于 movable-view 的,我们也可以通过 movable-view 的属性提高用户交互式的体验

  1. index.wxss
//黄色框的样式
.area{
  width: 100%;
  height: 400px;
  background: yellow;
}

//红色框的样式
.a{
  width: 100px;
  height: 100px;
  background: red;
}
  1. index.js
//我们使用了一个 botton 组件,并且设置了一个绑定事件,所以这里用到了js,这里我们设置了红色方框的移动位置,点击按钮会相应
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  areaEvent:function(event){
    var x = 100;
    var y = 100;
    this.setData({
      x: x,
      y: y
    })
  },

})

二、属性讲解

每个属性的存在都是为了提高 交互性 与 用户体验 而存在的

2.1 项目剖析

上面的项目中,我就用到了如下几种属性

  1. direction,属性值对应 all ,可以在各个方向移动
  2. inertia out-of-bounds ,属性值为 false,我的红色小方格是无法超出边界的
  3. x,y 的值 是在 js 文件中通过 this.setData 传值坐标对应(100,100),然后和 button 按钮绑定而而实现的
  4. 我还设置了 阻尼系数摩擦系数 这两个属性

更多的属性我也列举在下面,大家可以自行一一尝试~

2.2 更多属性

下面的内容均可在官方文档查阅到 —— 传送门
.
在这里插入图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐