在小程序的官方例子中,点击按钮以后的movable-view只是挪动了一次(链接:https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html),那我想每点击一次就再挪动一个距离怎么弄:

wxml:

<view class="section">
<view class="section__title">movable-view区域小于movable-area</view>
<movable-area style="height: 200px;width: 200px;background: red;">
<movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
</movable-view>
</movable-area>
<view class="btn-area">
<button size="mini" bindtap="taps">click me to move to (30px, 30px)</button>
</view>

  js:

Page({
data: {
x:0,
y:0
}, taps: function (e) {
let num = 10;
console.log(this.data.x);
this.setData({
x: this.data.x+num,
y: this.data.x+num
});
}
})

  如此便可以实现功能了

小程序的movable-view怎么持续移动的更多相关文章

  1. QQ 邀你上线小程序,官方生态能力持续赋能你的小程序

    转: QQ 邀你上线小程序,官方生态能力持续赋能你的小程序 你身边总有一些朋友,他们的表情包极其丰富,能时刻应对各种聊天场景. 表情包奇奇怪怪,可可爱爱,非常形象生动体现我们当下的心情,逐渐成为社交平 ...

  2. 小程序开发基础-view视图容器

    view 视图容器. // wxml <view class="section"> <view class="section__title"& ...

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

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

  4. 微信小程序 JS 获取View 和 屏幕相关属性(高度、宽度等等)

    wx.getSystemInfo({success: function (res) {thisWidth = res.windowWidth;}}); that.setData({view_Width ...

  5. 小程序 image跟view标签上下会有空隙

    解决方案 就是可以在image那里设置vertical-align:top/bottom/text-top/text-bottom 原因:图片文字等inline元素默许是跟父级元素的baseline对 ...

  6. 小程序 image跟view标签上下会有间隙

    图片文字等inline元素默许是跟父级元素的baseline对齐,而baseline又和父级底边有必定间距 我是使用: 加上这个消除了间隙,如果没有解决,你可以分别用 vertical-align:t ...

  7. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  8. 微信小程序如何动态增删class类名

    简述 由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的& ...

  9. 一套代码小程序&Web&Native运行的探索02

    接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/f ...

  10. 小程序webview实践

    小程序webview实践 -- 张所勇 大家好,我是转转开放业务部前端负责人张所勇,今天主要来跟大家分享小程序webview方面的问题,但我并不会讲小程序的webview原理,而我主要想讲的是小程序内 ...

随机推荐

  1. 加载jquery主函数的两种方式

    方式一: $(document).ready(fucntion){ var div1 = document.getElementById("div1"); alert(div1); ...

  2. VBA 删除页

    怎么让word自动删除第3.6.9.12等3的倍数页‘ Sub kk1206190933() Dim wNum As Integer Dim wPag As Integer With Selectio ...

  3. 风雪之隅(Laruence PHP开发组成员, Zend兼职顾问, Yaf, Yar, Yac, Opcache等项目作者、维护者.)

    http://www.laruence.com/?from=inf&wvr=5&loc=infblog

  4. write something

    今天是2013年7月8日了. 办公室里灯光很柔和,但是雨后的窗外让天空很亮,光线乘机也溜了进来. 偶尔想去联系某个人,点开了她的资料,进去了她的博客.看了这几年来为数不多不的几篇博客.可以看到一个人的 ...

  5. mysql按年度、季度、月度、周、日统计查询的sql语句

    本文介绍一些mysql中用于查询的sql语句,包括按年度.季度.月度.周.日统计查询等,有需要的朋友,可以参考下. 一.年度查询 查询 本年度的数据   SELECT * FROM blog_arti ...

  6. AM335X can驱动移植

    驱动选择 make menuconfig [*] Networking support ---> <*> CAN bus subsystem support ---> --- ...

  7. /dev/null脚本中作用

    /dev/null设备文件只有一个作用,往它里面写任何数据都直接丢弃. 因此保证了该命令执行时屏幕上没有任何输出. 在shell中常见. command  > /dev/null   2> ...

  8. 网络打印协议之LPR或RAW

    网络打印端口 标准 TCP/IP 端口监视器 对于连接到网络的打印设备,标准的 TCP/IP 端口监视器就是最佳选择.标准端口监视器增强了LPR(line printer remote,远程行式打印机 ...

  9. hadoop 参数

    看<Hadoop:权威指南>的时候收集了书上写的一些需要优化的参数,记录了一下子,给大家分享一下吧. 1.mapred.task.timeout 任务超时时间,默认是10分钟 2.mapr ...

  10. HISTTIMEFORMAT 设置历史命令时间的格式

    echo 'HISTTIMEFORMAT="%F %T `whoami`"  ' >>/etc/bashrc whoami 完了后面要有空格不然会连住和命令 ===== ...