微信小程序movable-view组件官方文档  传送门

  

  Learn

    一、moveable-view组件

一、movable-view组件

  direction:movable-view的移动方向,属性值有all、vertical、horizontal、none【默认值none】

  使用<movable-view>组件时必须和<movable-area>组件一起用,<movable-area>规定了可移动组件移动的范围

<!--index.wxml-->
Cynical丶Gary
<movable-area class="father-size"> <movable-view class='e size' direction="all">
</movable-view> </movable-area>

index.wxml

.container{
display: flex;
white-space: nowrap;
} .size{
width: 250rpx;
height: 150rpx;
} .father-size{
width: 100%;
height: 650rpx;
background-color: grey;
} .a{
background: red;
order:;
flex:;
} .b{
background: yellow;
order:;
flex:;
} .c{
background: blue;
order:;
flex:;
} .d{
background: green;
order:;
flex:;
} .e{
background: orange;
order:;
flex:;
}

index.css

  inertia:movable-view是否带有惯性【默认值为false】

  out-of-bounds:超过可移动区域后,movable-view是否还可以移动【默认值为false】

  x:定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画

  y:定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画

  使用规则

<movable-area class="father-size">
<movable-view class='e size' direction="all"
inertia="true"
out-of-bounds="false"
x="50" y="120">
</movable-view>
</movable-area>

  damping:阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快【默认值为20】

  friction:摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值【默认值为2】

  不方便测试出效果,使用规则同上

<movable-area class="father-size">
<movable-view class='e size' direction="all"
inertia="true"
out-of-bounds="false"
x="50" y="120"
damping="10000" friction="60">
</movable-view>
</movable-area>

  bindchange:拖动过程中触发的事件,event.detail = {x: x, y: y, source: source},其中source表示产生移动的原因,值可为touch(拖动)、touch-out-of-bounds(超出移动范围)、out-of-bounds(超出移动范围后的回弹)、friction(惯性)和空字符串(setData)

  在index.js中添加拖动事件doChange(),在index.wxml中帮定doChange()事件

  doChange:function(){
console.log("拖动中~");
}

<!--index.wxml-->
Cynical丶Gary
<movable-area class="father-size">
<movable-view class='e size' direction="all"
inertia="true"
out-of-bounds="false"
x="50" y="120"
damping="10000" friction="60"
bindchange="doChange">
</movable-view>
</movable-area>

index.wxml

Page({
data:{ },
doChange:function(){
console.log("拖动中~");
} })

index.js

微信小程序_(组件)可拖动movable-view的更多相关文章

  1. 微信小程序_(组件)icon、text、rich-text、progress四大基础组件

    微信小程序基础组件官方文档 传送门 Learn 一.icon图标组件 二.rich-text富文本组件 三.text文本组件 四.progress进度条组件 一.icon图标组件 type:icon的 ...

  2. 微信小程序_(组件)scroll-view可滚动视图

    微信小程序scroll-view组件官方文档 传送门 提前准备:使用<view>组件制作五条撑满的横向区域 <!--index.wxml--> Cynical丶Gary < ...

  3. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  4. 微信小程序_(组件)view视图容器

    微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagat ...

  5. 微信小程序_(组件)picker

    picker组件效果 官方文档:传送门 Page({ data: { array: ['美国', '中国', '巴西', '日本'], objectArray: [ { id: 0, name: '美 ...

  6. 微信小程序_(组件)组件基础

    (progress.text.block) 组件基础效果 官方文档:传送门 Page({ /** * 页面的初始数据 */ data: { text:"Gary 微信小程序\n", ...

  7. 微信小程序_(组件)canvas画布

    canvas画布效果 官方文档:传送门 Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, o ...

  8. 微信小程序_(组件)flex布局

    小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 定义布局:display:flex flex容器的属性: 一.flex-direction: ...

  9. 微信小程序_(组件)form表单

    Form表单.switch开关.数值选择器效果 官方文档:传送门 点击提交表单(按钮,提交开关,数值选择器,输入文本中)的值,显示在控制台上,点击重置,重置表单中的值. 实现过程 form表单,添加f ...

随机推荐

  1. 《深入实践C++模板编程》之五——容器与迭代器

    1.容器的定义 容器:专门用于某种形式组织及存储数据的类称为“容器”.   2.容器与迭代器 迭代器:封装了对容器虚拟数据序列的操作并按约定提供统一界面以遍历容器内容的代理类即为迭代器.   举例理解 ...

  2. 搭建自己的框架WedeNet(二)

    WedeNet2018.Infrastructure-基础设施层:结构如下: Tools结构如下: 考虑到系统可能会有多个数据上下文(暂时以两个为例),所以根据需要定义两个T4模板用来生成对应的ent ...

  3. 【ExtJs】ext前台中的日期控件传输时间到后台的转换保存过程

    //前台日期选择框 {fieldLabel:, padding: ',afterLabelTextTpl: required,allowBlank: false,format: 'Y-m-d H:i: ...

  4. python版本

    一般在Linux下,默认会安装一个python2.*的版本,但是我们自己开发有时候需要python3.*的版本 1. 安装python3 .安装依赖包 )首先安装gcc编译器,gcc有些系统版本已经默 ...

  5. jquery.validate.js表单验证 jquery.validate.js的用法

    jquery.validate.js这个插件已经用了2年多了,是一个不可多得的表单验证最方便快捷的插件.基于jquery的小插件,基本小白一学就会上手,对于项目表单页面比较多,元素比较多的校验,该插件 ...

  6. Oracle层次查询start with connect by

    博客参考:https://www.cnblogs.com/jerryxing/articles/2339352.html start with connect by 层次查询(Hierarchical ...

  7. vue滚动+滑动删除标记(移动端)仿qq/微信

    安装组件 "vue-touch": "^2.0.0-beta.4", main.js引入 import VueTouch from 'vue-touch' Vu ...

  8. PyCharm 创建指定版本的 Django (超详细图解)

    最近在学习胡阳老师(the5fire)的<Django企业级开发实战>,想要使用pycharm创建django项目时,在使用virtualenv创建虚拟环境后,在pycharm内,无论如何 ...

  9. Delphi ActiveX的使用

    樊伟胜

  10. 如何设置树莓派 -Zero 自启动连接WIFI

    1. 首先我们需要一台可以读取树莓派跟文件系统的Linux虚拟机(比如Ubuntu) 将树莓派SD卡系统插入电脑,识别并打开rootfs文件夹,切换到`rootfs/etc/wpa_supplican ...