在小程序的官方例子中,点击按钮以后的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. spring报错:Caused by: java.lang.IllegalStateException: Cannot convert value of type for property : no matching editors or conversion strategy found

    原因分析:是因为类返回的类型跟期望的类型没有继承关系,返回的类型就SqlMapClient,它是通过实现了FactoryBean<SqlMapClient>接口的SqlMapClientF ...

  2. C++笔记 4

    1.类和对象   类就是对对象的描述,主要从属性和行为两个方面描述.   对于属性一般作成private , 行为作为public   函数 (1)构造函数,初始化所有的成员变量,系统自动调用,可以重 ...

  3. C语言 · s01串

    算法训练 s01串   时间限制:1.0s   内存限制:256.0MB      问题描述 s01串初始为"0" 按以下方式变换 0变1,1变01 输入格式 1个整数(0~19) ...

  4. Android——数据存储:手机外部存储 SD卡存储

    xml <EditText android:layout_width="match_parent" android:layout_height="wrap_cont ...

  5. 早前的java笔记

    多个if语句时即使前一个if为真,后面的if也要继续判断, 如果用else if 则只有前者为假的时候它的if 才接着判断. if else 语句 if a>=5 shuchu b=10 els ...

  6. Kettle变量和自己定义java代码的实例应用

    1  kettle.properties參数配置数据源连接和FTP连接 因为測试环境和生产环境中数据库连接FTP等配置会在部署过程中变更,所以预先定义成配置项,在配置文件里改动.这样測试和公布将会变得 ...

  7. 一、VM8.0 + CentOS 6.5 连接网络

    VM8.0 + CentOS 6.5 连接网络

  8. (二)使用预定义模型 QStringListModel例子

    使用预定义模型 QStringListModel例子 源代码如下 Main.cpp #include <QApplication> #include "teamleadersdi ...

  9. 修改 ueditor1_4_3-utf8-php 它的图片上传地址

    本来是这样的 至少应该是在,myapp目录下吧,从myapp文件夹,我的网站才刚开始啊...你让我将来怎么设置?麻烦... 找到uploader的文件 $rootPath = $_SERVER['DO ...

  10. Spring的p标签

    看Spring in action的时候看过p标签,可惜这东西不用就忘. p标签是为了简化setter的注入而引入的. 用法: p:属性 = "{值}" p:属性-ref = &q ...