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

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. 了解Vue.js

    一.了解Vue (1)Vue.js在设计上采用MVVM(Model-View-ViewModel)模式 当View变化时,会自动更新到ViewModel,反之亦然.View与ViewModel通过双向 ...

  2. nginx的限流问题

    nginx的限流问题 http{ limit_req_zone $binary_remote_addr zone=req_one:10m rate=100r/s;server{ listen 8080 ...

  3. 常见的概率分布类型(Probability Distribution)

    统计学中最常见的几种概率分布分别是正态分布(normal distribution),t分布(t distribution),F分布(F distribution)和卡方分布(χ2 distribut ...

  4. 查看Linux的所有线程

    查看Linux所有线程有3种方法: ps -T <pid>可以看指定pid的所有线程,SPID就是指线程.或者用ps -eLf top -H,和普通的top命令相比,多了Thread ht ...

  5. HAOI2018苹果树

    题解 首先所有生成树的情况树是\(n!\)的,因为第一次有1中方法,第二次有两种放法,以此类推... 然后我们发现距离这种东西可以直接枚举每条边算贡献. 于是我们枚举了一个点\(i\),又枚举了这个点 ...

  6. 2018-2019-2 网络对抗技术 20165232 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165232 Exp2 后门原理与实践 1. 后门原理与实践实验说明及预备知识 一.实验说明 任务一:使用netcat获取主机操作Shell,cron启动 ( ...

  7. 【SQL】ROW_NUMBER() OVER(partition by 分组列 order by 排序列)用法详解+经典实例

    #用法说明 select row_number() over(partition by A order by B ) as rowIndex from table A :为分组字段 B:为分组后的排序 ...

  8. 076、创建Rex-Ray volume (2019-04-23 周二)

    参考https://www.cnblogs.com/CloudMan6/p/7624556.html   前面我们安装部署了 Rex-Ray ,并且成功配置 Virtualbox backend ,今 ...

  9. Spring Boot 2.x以后static下面的静态资源被拦截

    今天创建一个新的Spring Boot项目,没注意到spring boot的版本,发现静态资源无法访问.百度一下发现好像是Spring Boot 2.0版本以后static目录不能直接访问. 接下来直 ...

  10. GBDT原理及利用GBDT构造新的特征-Python实现

    1. 背景 1.1 Gradient Boosting Gradient Boosting是一种Boosting的方法,它主要的思想是,每一次建立模型是在之前建立模型损失函数的梯度下降方向.损失函数是 ...