微信小程序movable-area的使用（会移动的小黄点）

最新推荐文章于 2024-05-20 22:23:58 发布
最新推荐文章于 2024-05-20 22:23:58 发布
阅读量3.9k 收藏 4
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lily_808/article/details/104758494
版权

1：movable-area要和movable-view组合起来使用
2：这里分享一个小例子
wxml代码参考代码
js代码
参考函数代码
在页面里面通过设置movable-area的宽度和高度及背景色使其显示出来，同时设置movable-view的宽度高度和border-radius使其显示为一个小黄球
在js逻辑文件中，定义一个tap函数，用户在视图页面点击按钮，执行tap函数
函数生成一个随机数，使得小球在点击按钮的过程中可以随意动，同时使用了弹出框来提示小球的位置。
参考效果图
上一部分是比较大小
下一部分是会动的小黄点
参考效果图

lily_808
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序新增的拖动组件movable-view使用教程
12-10
前言 小程序在520节日前夜，让程序员们又躁动了一把，更新了一些很诱人的功能，如内容转发API，iBeacon API，振动API，屏幕亮度调节API等，也增强了地图组件的功能。 此次的更新中，也新增了一个UI组件，它就是视图组件movable-view，它需要配合movable-area来一起使用。简单来说，它就是一个支持在指定区域内可以拖动内容的容器。 我们来看一个简单的示例： <movable xss=removed> <movable-view direction="all" style="h
uni-app教学之使用movable-area组件
码奴一只猿
05-30 1955
movable-area组件是Uniapp中的一个非常实用的组件，它可以让用户在页面上拖动一个可移动的区域，从而实现一些有趣的交互效果。本文将详细介绍如何在Uniapp中使用movable-area组件。
movable-area使用的样式搭建问题
FUFCY的博客
05-13 221
<template> <view class="list"> <movable-area style="width: 100%; height: 80rpx; margin: 20rpx 0;"> <movable-view style="width: 100%; height: 80rpx;"> <view class="item"> <view class="left">{{label}}&...
小程序开发之组件movable-view（移动的视图容器）
M.Siebel
01-11 4206
movable-view 可移动的视图容器，在页面中可以拖拽滑动 movable-view属性 注意：movable-view必须在组件中，并且必须是直接子节点，否则不能移动。 movable-area movable-view 的可移动区域 注意：movable-area 必须设置width和height属性，不设置默认为10px 当movable-view小于movable-area时，m...
微信小程序出现sitemap的黄色警告,当前页面将被索引
luoteen的博客
03-05 4356
VM2309:1 根据 sitemap 的规则[0]，当前页面 [pages/index/main] 将被索引 小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。 把这个设置成false。就不会有这个讨厌的黄色警告了。 在项目的根目录project.config.json里的setting里加个配置，checkSiteMap设置成false，提示就没了 ...
微信小程序movable-view移动图片和双指缩放
03-29
先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:”可移动的视图容器，在页面中可以拖拽...当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方
微信小程序movable view移动图片和双指缩放实例代码
01-03
movable-area是微信小程序的新组件，可以用来移动视图区域movable-view。移动方向可选择任何、垂直和平行。可移动区域里包含其他文本、图片、按钮等组件。可移动区域可绑定touchend等事件。movable-view的参数可调整...
微信小程序基于movable-view实现滑动删除效果
10-15
主要介绍了微信小程序基于movable-view实现滑动删除效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序 movable-view
03-29
微信小程序 movable-view       movable-view 是一个可移动的视图容器，在页面中可以拖拽滑动。     1.属性： 属性名 类型  默认值 说明 direction String  none movable-view的移动方向，属性值有all、...
movable-area实现可拖动悬浮图标
github_38514167的博客
12-22 451
movable-area实现可拖动悬浮图标 微信官网文档地址 movable-view的可移动区域 实现代码 1.wxml <movable-area bindtap='gotoHome'> <movable-view x="{{x}}" y="{{y}}" direction="all"> <image src="../../../../images/gohome.png"></image> </movable-view> </mo
微信小程序组件movable-area事件穿透，事件冒泡，movable-area遮盖/遮挡住其他元素之后点击事件不穿透/不冒泡解决办法
05-14 3120
先上解决办法： .movable-area{ position:fixed; top:0; left:0; width:750rpx; height:100%; pointer-events: none; } .movable-view{ color:#F00; position:relative; pointer-events: auto; width:auto; height:auto; display:inline-block; } 看微信小程序需求
微信小程序 movable-area 区域拖动动态组件演示
weixin_45966674的博客
10-08 1561
使用 movable-area 组件可以对其内部的 movable-view 组件进行拖动操作，可以通过设置不同的属性和事件来自定义拖动的效果和行为。例如，可以设置 movable-area 的方向、边界限制、移动过程中的动画效果等等。movable-area 组件在小程序中的作用是用于创建一个可移动的区域，可以在该区域内拖动视图或内容。这个组件常用于实现可拖动的容器或可滑动的列表等交互效果。这样 我们这块元素就可以在区域内拖动。
小程序组件之--movable-area与movable-view
morty
07-09 2144
这期我们将小程序组件中的movable-area和movable-view 从这几个单词的含义中我们也能大概了解到这两个组件的大概含义——可移动区域、可移动视图（元素） movable-area组件的作用是定义一个区域。在这个区域内的movable-view的组件可以被用户自由的移动。想横着动就横着动，想纵着动就纵着动。想不动，，，那就别用它啦。 ok，为了直观一点，上代码！ wxml <movable-area class='area'> <movable-view class="vi
微信小程序组件 movable-area，实现小图标，在窗口中来回拖动
elementFei的博客
05-10 5813
需求： 微信小程序中，一张小图标，可以在窗口中来回拖动。 解决方法： 使用小程序的movable-area组件， <movable-area class="movableArea"> <movable-view class="movableView" style="height: 50rpx; width: 50rpx; background: ...
微信小程序官方组件展示之视图容器movable-area源码
软件事业部的博客
08-16 174
以下将展示微信小程序之视图容器movable-area官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。
Flutter——仿高德三级联动Drawer
ljq5945的博客
07-23 987
前言 一直觉得高德地图的首页Drawer滑动起来很漂亮，还有一些科技感，之前用android实现了一遍，趁着最近不忙再用Flutter实现一遍。 示意图 为了方便区分布局结构，我使用了不同的颜色 Drawer高度状态 可以看到drawer 高度有三种情况： 最大高度 距离顶部有一小段空间，这里空间高度定位70， drawer的高度为：屏幕高度-70 中等高度 这里我们将drawer的显示高度定位300 最小高度 这里drawer的显示高度定位150 Drawer的ui 结构 可以看到drawer内
uni中自带的拖动、缩放movable-area的使用
10-23 1636
联系微信：zkhh666 1、因为官方我没找到相关代码（懒） 2、我放大后拖动，总是显示不全（自己本），然后就写下使用这个组件 3、我先写点官方文档中的东西吧：字节小程序不支持、movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域。 废话不多说，上代码了 Ps：我这里把movable-view宽度没写死，可能会很笨，有更好的方法可以提，我的需求是点击图片，弹出框 + 弹出框里面的内容可以放大，所以我copy了一下元素 Ps1：因为里面的比外面的，你可以进
基于云开发快速搭建智能名片小程序
最新发布
mon_star°的博客
05-20 454
熏风徐来，麦穗摇曳；麦类等夏熟作物生长旺盛，籽粒灌浆渐趋饱满，但尚未完全成熟，故称“小满”。今日小满，基于云开发快速搭建智能名片小程序，发文以记录输入和输出过程。
【全开源】约课健身管理系统小程序
2401_84413795的博客
05-18 398
一款基于FastAdmin+ThinkPHP+Uniapp开发的米扬约课健身管理系统，应用于健身房，健身工作室，运动会所，运动场馆，瑜伽馆，拳馆等泛健身行业的场馆中。米扬约课健身致力于为各种健身场馆打造真正有效的营销系统，简洁易用的客户信息管理系统，适合多门店、多角色、多场景的服务系统，紧跟健身行业的进步与升级，为广大客户提供优质的服务。约课健身管理系统源码的推出，不仅为用户提供了更加便捷、高效的健身预约方式，也为健身机构提供了更加智能化、精细化的管理方式。我们期待与您共同打造更加健康、美好的健身生活！
小程序movable-area如何设置回弹到原点
04-04
可以通过监听movable-view的touchend事件来判断movable-view是否超出了movable-area的范围，如果超出了就设置movable-view的位置回到原点。 示例代码： 1.在movable-area中添加一个movable-view： ``` <movable...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值