提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

项目 微信 学习 程序
2023-04-18 14:49:34 时间

movable-view 组件

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

一、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 更多属性

下面的内容均可在官方文档查阅到 —— 传送门

相关文章