小程序的movable-view怎么持续移动

2024-06-19 21:32

本文主要是介绍小程序的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怎么持续移动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076204

相关文章

Django调用外部Python程序的完整项目实战

《Django调用外部Python程序的完整项目实战》Django是一个强大的PythonWeb框架,它的设计理念简洁优雅,:本文主要介绍Django调用外部Python程序的完整项目实战,文中通... 目录一、为什么 Django 需要调用外部 python 程序二、三种常见的调用方式方式 1:直接 im

C++ 右值引用(rvalue references)与移动语义(move semantics)深度解析

《C++右值引用(rvaluereferences)与移动语义(movesemantics)深度解析》文章主要介绍了C++右值引用和移动语义的设计动机、基本概念、实现方式以及在实际编程中的应用,... 目录一、右值引用(rvalue references)与移动语义(move semantics)设计动机1

使用Python实现在PDF中添加、导入、复制、移动与删除页面

《使用Python实现在PDF中添加、导入、复制、移动与删除页面》在日常办公和自动化任务中,我们经常需要对PDF文件进行页面级的编辑,使用Python,你可以轻松实现这些操作,而无需依赖AdobeAc... 目录1. 向 PDF 添加空白页2. 从另一个 PDF 导入页面3. 删除 PDF 中的页面4. 在

Mysql 驱动程序的程序小结

《Mysql驱动程序的程序小结》MySQL驱动程序是连接应用程序与MySQL数据库的重要组件,根据不同的编程语言和应用场景,MySQL提供了多种驱动程序,下面就来详细的了解一下驱动程序,感兴趣的可以... 目录一、mysql 驱动程序的概念二、常见的 MySQL 驱动程序1. MySQL Connector

mysql笛卡尔积怎么形成以及怎么避免笛卡尔积详解

《mysql笛卡尔积怎么形成以及怎么避免笛卡尔积详解》笛卡尔积是指两个集合中所有可能的有序对的集合,在数据库中它表示两个表的每一行都与另一个表的每一行组合,:本文主要介绍mysql笛卡尔积怎么形成... 目录第一部分:什么是笛卡尔积,它是如何形成的?1. 定义2. 在 mysql 中如何形成3. 笛卡尔积的

java程序远程debug原理与配置全过程

《java程序远程debug原理与配置全过程》文章介绍了Java远程调试的JPDA体系,包含JVMTI监控JVM、JDWP传输调试命令、JDI提供调试接口,通过-Xdebug、-Xrunjdwp参数配... 目录背景组成模块间联系IBM对三个模块的详细介绍编程使用总结背景日常工作中,每个程序员都会遇到bu

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面:本文主要介绍uni-app小程序项目中实... 目录方式一:使用<canvas>实现图片压缩(推荐,兼容性好)示例代码(小程序平台):方式二:使用uni

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目,需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径,以下

基于Python编写自动化邮件发送程序(进阶版)

《基于Python编写自动化邮件发送程序(进阶版)》在数字化时代,自动化邮件发送功能已成为企业和个人提升工作效率的重要工具,本文将使用Python编写一个简单的自动化邮件发送程序,希望对大家有所帮助... 目录理解SMTP协议基础配置开发环境构建邮件发送函数核心逻辑实现完整发送流程添加附件支持功能实现htm

C#控制台程序同步调用WebApi实现方式

《C#控制台程序同步调用WebApi实现方式》控制台程序作为Job时,需同步调用WebApi以确保获取返回结果后执行后续操作,否则会引发TaskCanceledException异常,同步处理可避免异... 目录同步调用WebApi方法Cls001类里面的写法总结控制台程序一般当作Job使用,有时候需要控制