小程序的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原理,而我主要想讲的是小程序内 ...
随机推荐
- 加载jquery主函数的两种方式
方式一: $(document).ready(fucntion){ var div1 = document.getElementById("div1"); alert(div1); ...
- VBA 删除页
怎么让word自动删除第3.6.9.12等3的倍数页‘ Sub kk1206190933() Dim wNum As Integer Dim wPag As Integer With Selectio ...
- 风雪之隅(Laruence PHP开发组成员, Zend兼职顾问, Yaf, Yar, Yac, Opcache等项目作者、维护者.)
http://www.laruence.com/?from=inf&wvr=5&loc=infblog
- write something
今天是2013年7月8日了. 办公室里灯光很柔和,但是雨后的窗外让天空很亮,光线乘机也溜了进来. 偶尔想去联系某个人,点开了她的资料,进去了她的博客.看了这几年来为数不多不的几篇博客.可以看到一个人的 ...
- mysql按年度、季度、月度、周、日统计查询的sql语句
本文介绍一些mysql中用于查询的sql语句,包括按年度.季度.月度.周.日统计查询等,有需要的朋友,可以参考下. 一.年度查询 查询 本年度的数据 SELECT * FROM blog_arti ...
- AM335X can驱动移植
驱动选择 make menuconfig [*] Networking support ---> <*> CAN bus subsystem support ---> --- ...
- /dev/null脚本中作用
/dev/null设备文件只有一个作用,往它里面写任何数据都直接丢弃. 因此保证了该命令执行时屏幕上没有任何输出. 在shell中常见. command > /dev/null 2> ...
- 网络打印协议之LPR或RAW
网络打印端口 标准 TCP/IP 端口监视器 对于连接到网络的打印设备,标准的 TCP/IP 端口监视器就是最佳选择.标准端口监视器增强了LPR(line printer remote,远程行式打印机 ...
- hadoop 参数
看<Hadoop:权威指南>的时候收集了书上写的一些需要优化的参数,记录了一下子,给大家分享一下吧. 1.mapred.task.timeout 任务超时时间,默认是10分钟 2.mapr ...
- HISTTIMEFORMAT 设置历史命令时间的格式
echo 'HISTTIMEFORMAT="%F %T `whoami`" ' >>/etc/bashrc whoami 完了后面要有空格不然会连住和命令 ===== ...