小程序的movable-view怎么持续移动
在小程序的官方例子中,点击按钮以后的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怎么持续移动的更多相关文章
- QQ 邀你上线小程序,官方生态能力持续赋能你的小程序
转: QQ 邀你上线小程序,官方生态能力持续赋能你的小程序 你身边总有一些朋友,他们的表情包极其丰富,能时刻应对各种聊天场景. 表情包奇奇怪怪,可可爱爱,非常形象生动体现我们当下的心情,逐渐成为社交平 ...
- 小程序开发基础-view视图容器
view 视图容器. // wxml <view class="section"> <view class="section__title"& ...
- 微信小程序_(组件)view视图容器
微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagat ...
- 微信小程序 JS 获取View 和 屏幕相关属性(高度、宽度等等)
wx.getSystemInfo({success: function (res) {thisWidth = res.windowWidth;}}); that.setData({view_Width ...
- 小程序 image跟view标签上下会有空隙
解决方案 就是可以在image那里设置vertical-align:top/bottom/text-top/text-bottom 原因:图片文字等inline元素默许是跟父级元素的baseline对 ...
- 小程序 image跟view标签上下会有间隙
图片文字等inline元素默许是跟父级元素的baseline对齐,而baseline又和父级底边有必定间距 我是使用: 加上这个消除了间隙,如果没有解决,你可以分别用 vertical-align:t ...
- wn-cli 像React组件开发一样来开发微信小程序
项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...
- 微信小程序如何动态增删class类名
简述 由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的& ...
- 一套代码小程序&Web&Native运行的探索02
接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/f ...
- 小程序webview实践
小程序webview实践 -- 张所勇 大家好,我是转转开放业务部前端负责人张所勇,今天主要来跟大家分享小程序webview方面的问题,但我并不会讲小程序的webview原理,而我主要想讲的是小程序内 ...
随机推荐
- spring报错:Caused by: java.lang.IllegalStateException: Cannot convert value of type for property : no matching editors or conversion strategy found
原因分析:是因为类返回的类型跟期望的类型没有继承关系,返回的类型就SqlMapClient,它是通过实现了FactoryBean<SqlMapClient>接口的SqlMapClientF ...
- C++笔记 4
1.类和对象 类就是对对象的描述,主要从属性和行为两个方面描述. 对于属性一般作成private , 行为作为public 函数 (1)构造函数,初始化所有的成员变量,系统自动调用,可以重 ...
- C语言 · s01串
算法训练 s01串 时间限制:1.0s 内存限制:256.0MB 问题描述 s01串初始为"0" 按以下方式变换 0变1,1变01 输入格式 1个整数(0~19) ...
- Android——数据存储:手机外部存储 SD卡存储
xml <EditText android:layout_width="match_parent" android:layout_height="wrap_cont ...
- 早前的java笔记
多个if语句时即使前一个if为真,后面的if也要继续判断, 如果用else if 则只有前者为假的时候它的if 才接着判断. if else 语句 if a>=5 shuchu b=10 els ...
- Kettle变量和自己定义java代码的实例应用
1 kettle.properties參数配置数据源连接和FTP连接 因为測试环境和生产环境中数据库连接FTP等配置会在部署过程中变更,所以预先定义成配置项,在配置文件里改动.这样測试和公布将会变得 ...
- 一、VM8.0 + CentOS 6.5 连接网络
VM8.0 + CentOS 6.5 连接网络
- (二)使用预定义模型 QStringListModel例子
使用预定义模型 QStringListModel例子 源代码如下 Main.cpp #include <QApplication> #include "teamleadersdi ...
- 修改 ueditor1_4_3-utf8-php 它的图片上传地址
本来是这样的 至少应该是在,myapp目录下吧,从myapp文件夹,我的网站才刚开始啊...你让我将来怎么设置?麻烦... 找到uploader的文件 $rootPath = $_SERVER['DO ...
- Spring的p标签
看Spring in action的时候看过p标签,可惜这东西不用就忘. p标签是为了简化setter的注入而引入的. 用法: p:属性 = "{值}" p:属性-ref = &q ...