movable-view 组件
- 一、movable-view 初体验
- 1.1 项目展示
- 1.2 项目源码
- 二、属性讲解
- 2.1 项目剖析
- 2.2 更多属性
和官方文档一起食用，效果更佳 —— 传送门
一、movable-view 初体验
1.1 项目展示
movable-view，从字面意思上就可以理解，可以移动的组件，具体是什么样的呢，看下面的效果图
这是微信独有的一个模块，标签有两类
- movable-area 是父容器
- movable-view 是子容器
并且，子容器必须在父容器当中，否则不能移动
1.2 项目源码
- 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 的属性提高用户交互式的体验
- index.wxss
//黄色框的样式.area{ width: 100%; height: 400px; background: yellow;}//红色框的样式.a{ width: 100px; height: 100px; background: red;}- 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 项目剖析
上面的项目中，我就用到了如下几种属性
direction，属性值对应 all ，可以在各个方向移动inertia out-of-bounds，属性值为 false，我的红色小方格是无法超出边界的- x，y 的值 是在 js 文件中通过
this.setData传值坐标对应(100,100)，然后和 button 按钮绑定而而实现的 - 我还设置了 阻尼系数 和 摩擦系数 这两个属性
更多的属性我也列举在下面，大家可以自行一一尝试~
2.2 更多属性
下面的内容均可在官方文档查阅到 —— 传送门
