uni-app组件:movable-area/movable-view实现可拖动的view(hbuilderx 3.6.18)
2023-09-14 09:01:15 时间
一,代码:
<template> <view> <movable-area style="width:750rpx;height:750rpx;background: #ffff00;"> <movable-view style="width:120rpx;height:120rpx;border-radius:20rpx; background: #ff0000;" :x = x :y=y direction="all" @change="onChange" > </movable-view> </movable-area> <button style="width:700rpx;margin-left: 25rpx;margin-top: 25rpx;" @click="move">用程序移动</button> </view> </template> <script> export default { data() { return { x:0, y:0, tmpx:0, //保存移动到的位置x tmpy:0, //保存移动到的位置y } }, methods: { move:function() { this.x = this.tmpx; this.y = this.tmpy; setTimeout(()=>{ this.x = 150; this.y = 150; }) }, onChange:function(e){ this.tmpx = e.detail.x; this.tmpy = e.detail.y; }, } } </script> <style> </style>
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,测试效果
三,查看hbuilderx的版本:
![](https://img2023.cnblogs.com/blog/1938691/202302/1938691-20230212213610644-947637439.png)
相关文章
- Java4Android之APP自动升级
- 第三百八十节,Django+Xadmin打造上线标准的在线教育平台—将所有app下的models数据库表注册到xadmin后台管理
- 详解6大安全场景:移动app安全、防DDoS、防入侵、数据加密、业务反欺诈、内容安全
- H5及微信中唤起app的解决方案
- [AngularJS] Using angular.bootstrap to Initialize Your App
- Express engine 学习笔记 - app.engine 的使用方法
- uni-app实现组件菜单左右滑动并点击切换(选中居中显示)demo效果(整理)
- 熬夜再战Android从青铜到王者-UI组件快速搭建App界面【建议收藏】
- Web App、Hybrid App与Native App
- Android app 录音回音消除两种方法
- 开发移动 APP 时,你应注意这 5 个细节
- 获取app的安装路径
- 获取设备上全部系统app信息
- 使用pytest-xdist实现分布式APP自动化测试
- 持续集成这样做,App自动化测试效率提高50%
- android app 的插件化、组件化、模块化开发