项目中需要一个可拖动的小图标,

1.小程序组件movable-view

文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html#movable-area

movable-view可移动的范围是在整个movable-area区域,所以movable-area是必须的,一般图标可以全屏幕移动的,movable-areas就是pages下的最高父级,包裹所有节点的

附上代码,有需要了解的可以直接留言:

wxml:

<movable-area>
<movable-view x="{{x}}" y="{{y}}" direction="all">
 <view>
<image bindtap='xs' mode='' src='../images/car.jpg' style="width:100rpx;height:100rpx;"></image>
</view>
</movable-view>
</movable-area>

wxss:

movable-view {
display: flex;
align-items: center;
justify-content: center;
/* background: #1AAD19; */
color: #fff;
position: fixed;
z-index:;
width: 176rpx;
height: 176rpx;
right: auto;
background: #000;
}
movable-area {
height: 100%;
width: 100%;
/* margin: 50rpx; *//* background-color: #ccc; */
overflow: hidden;
position: relative;
z-index:;
background: #fff
}

js:

x,y可以定义图标的起始位置
Page({
data:{
x: 0,
   y: 0,
    scale: 2,
}
})
movable-view属性:
  out-of-bounds:超过可移动范围是否允许拖动     默认false     为true时,可以拖动图标到范围之外一小段距离,然后平滑回到范围之内,

 

小程序 movable-view 在页面中的可移动图标的更多相关文章

  1. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  2. 小程序swiper实现订单页面

    小程序swiper实现订单页面 myOrder.wxml <!--pages/myorder/myorder.wxml--> <view class="swiper-tab ...

  3. 小程序webview跳转页面后没有返回按钮完美解决方案

    随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...

  4. 小程序-web-view嵌入H5页面遇到的bug

    遇到的问题1:ios页面中,内容过多时有下滑真是功能,但是下滑的时候回看到底部的微信自带的灰色背景及H5的域名(ios的webview中上/下拉露出黑灰色背景问题) 解决办法:给body添加样式--- ...

  5. 小程序内嵌H5页面判断微信及小程序环境

    判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...

  6. 微信小程序生命周期、页面生命周期、组件生命周期

    1. 生命周期 App(全局) 位置:项目根目录app.js文件 App({ onLaunch (options) { // console.log('小程序初始化') }, onShow(optio ...

  7. 微信小程序开发07-列表页面怎么做

    接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...

  8. 转载【小程序】: 微信小程序开发---应用与页面的生命周期

    App App() App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. object参数说明: 属性 类型 描述 触发时机 onLaunch Functi ...

  9. 「小程序JAVA实战」小程序模板在外部页面引用(20)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-20/ 不知道老铁还有印象吗?当时讲模板的时候,是在当前的页面进行模板的应用,如何外部的方式引用模板 ...

随机推荐

  1. 返回人民币大写方式(num2rmb)

    CREATE OR REPLACE FUNCTION num2rmb(Pi_MONEY NVARCHAR2) RETURN NVARCHAR2 IS -- PURPOSE :返回人民币大写方式 v_N ...

  2. MHA安装手记

    安装MHA服务器和客户端 # yum install perl-DBD-MySQL 在manager节点上: # yum install perl-DBD-MySQL # yum install pe ...

  3. js中的各种宽高以及位置总结

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

  4. python操作Excel读--使用xlrd

    一.安装xlrd模块 到python官网下载http://pypi.python.org/pypi/xlrd模块安装,前提是已经安装了python 环境. 二.使用介绍 1.导入模块 import x ...

  5. ioremap 与 mmap【转】

    转自:http://blog.csdn.net/junllee/article/details/7415732 内存映射 对于提供了MMU(存储管理器,辅助操作系统进行内存管理,提供虚实地址转换等硬件 ...

  6. 【Java】 剑指offer(3) 二维数组中的查找

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上 ...

  7. SQL Server 4

    一.视图 1.创建视图 1)选中数据库中的表中的视图处,右键选择新建视图,即: 2)在弹出“添加表”对话框中,单击“表”标签,选择要添加的表,点击添加,即: 3)选中要建立联系的列名的复选框,然后拖动 ...

  8. 在android中配置 slf4j + log4j 日志记录框架

    需求: 在项目开发中,需要记录 操作日志 .起初自己写了个简单的日志记录文本写入到文本的方法,后来随着项目的膨胀,需要考虑更多的操作,开始考虑性能问题. 实现: 考虑使用 slf4j + log4j ...

  9. RNN循环神经网络结构

    note: RNN处理有序的数据.例如一句话 一层双向的循环神经网络示意图(没有 S0' 则为单层循环): 正向循环S0 到 Si:y1的值受X1,A1以及上一层的A0影响 反向循环Si 到 S0:y ...

  10. 关于centos7中使用rpm方式安装mysql5.7版本后无法使用root登录的问题

    最近在centos7中通过rpm方式安装了最新版本的mysql-server 5.7 (mysql57-community-release-el7-7.noarch.rpm) ,发现安装成功后无法使用 ...