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

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. xml 解析参考文档

    https://www.cnblogs.com/a1656344531/archive/2012/11/28/2792863.html

  2. 网络知识之http请求

    使用http超文本传输协议来访问web服务器 它定义了客户端和服务器之间交互的信息内容和步骤. 客户端解析url后发送请求消息---->服务器(解析请求消息,完成工作,包装结果为响应消息)--- ...

  3. 【dp】摘花生

    [题目描述] Hello Kitty想摘点花生送给她喜欢的米老鼠.她来到一片有网格状道路的矩形花生地(如下图),从西北角进去,东南角出来.地里每个道路的交叉点上都有种着一株花生苗,上面有若干颗花生,经 ...

  4. css控制table间距

    border-collapse: separate;border-spacing: 20px 30px; /* 水平间距 垂直间距 */

  5. 微信公众号开发之access_token的全局共用

    最近做微信公众号开发,涉及到access_token的缓存问题(避免各自的应用都去取access_token,同时解决微信 appid和appsecret的安全问题),在通用权限管理系统底层增加了实现 ...

  6. BAT面试经验分享——iOS高级开发工程师的自我总结!

    序言 目前形势,参加到iOS队伍的人是越来越多,甚至已经到供过于求了. 今年,找过工作人可能会更深刻地体会到今年的就业形势不容乐观,随着各大公司秋招的开始,很多小伙伴都行动起来了,我也有幸获得了一份不 ...

  7. head里两个重要标签base和meta

    base标签 <base href="../"> 我们并不常用的一个标签,但是一旦用得不当会带来灾难性的影响. 它会影响到所有页面上的href和src属性相对路劲的定位 ...

  8. 2. Java内存区域

    Java 虚拟机的内存模型分为两部分:一部分是线程共享的,包括 Java 堆和方法区:另一部分是线程私有的,包括虚拟机栈和本地方法栈,以及程序计数器这一小部分内存 2.1 程序计数器 程序计数器(Pr ...

  9. 计算机网络之iframe内联框架跨域

    iframe框架同源下的数据调用 iframe框架非同源下的数据传输 一.iframe框架同源下的数据调用 1.父窗口向子窗口获取数据 //html1父级窗口 <iframe src=" ...

  10. Phoenix(SQL On HBase)

    1.简介 Phoenix是一个HBase框架,可以通过SQL的方式来操作HBase. Phoenix是构建在HBase上的一个SQL层,是内嵌在HBase中的JDBC驱动,能够让用户使用标准的JDBC ...