手把手带你学习微信小程序 —— 九（movable-view 组件）

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

代码语言：javascript复制

  <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

代码语言：javascript复制

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

//红色框的样式
.a{
  width: 100px;
  height: 100px;
  background: red;
}

index.js

代码语言：javascript复制

//我们使用了一个 botton 组件，并且设置了一个绑定事件，所以这里用到了js，这里我们设置了红色方框的移动位置，点击按钮会相应
Page({

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

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

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

})