小程序 movable-view 在页面中的可移动图标
项目中需要一个可拖动的小图标,
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 在页面中的可移动图标的更多相关文章
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- 小程序swiper实现订单页面
小程序swiper实现订单页面 myOrder.wxml <!--pages/myorder/myorder.wxml--> <view class="swiper-tab ...
- 小程序webview跳转页面后没有返回按钮完美解决方案
随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...
- 小程序-web-view嵌入H5页面遇到的bug
遇到的问题1:ios页面中,内容过多时有下滑真是功能,但是下滑的时候回看到底部的微信自带的灰色背景及H5的域名(ios的webview中上/下拉露出黑灰色背景问题) 解决办法:给body添加样式--- ...
- 小程序内嵌H5页面判断微信及小程序环境
判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...
- 微信小程序生命周期、页面生命周期、组件生命周期
1. 生命周期 App(全局) 位置:项目根目录app.js文件 App({ onLaunch (options) { // console.log('小程序初始化') }, onShow(optio ...
- 微信小程序开发07-列表页面怎么做
接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...
- 转载【小程序】: 微信小程序开发---应用与页面的生命周期
App App() App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. object参数说明: 属性 类型 描述 触发时机 onLaunch Functi ...
- 「小程序JAVA实战」小程序模板在外部页面引用(20)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-20/ 不知道老铁还有印象吗?当时讲模板的时候,是在当前的页面进行模板的应用,如何外部的方式引用模板 ...
随机推荐
- xml 解析参考文档
https://www.cnblogs.com/a1656344531/archive/2012/11/28/2792863.html
- 网络知识之http请求
使用http超文本传输协议来访问web服务器 它定义了客户端和服务器之间交互的信息内容和步骤. 客户端解析url后发送请求消息---->服务器(解析请求消息,完成工作,包装结果为响应消息)--- ...
- 【dp】摘花生
[题目描述] Hello Kitty想摘点花生送给她喜欢的米老鼠.她来到一片有网格状道路的矩形花生地(如下图),从西北角进去,东南角出来.地里每个道路的交叉点上都有种着一株花生苗,上面有若干颗花生,经 ...
- css控制table间距
border-collapse: separate;border-spacing: 20px 30px; /* 水平间距 垂直间距 */
- 微信公众号开发之access_token的全局共用
最近做微信公众号开发,涉及到access_token的缓存问题(避免各自的应用都去取access_token,同时解决微信 appid和appsecret的安全问题),在通用权限管理系统底层增加了实现 ...
- BAT面试经验分享——iOS高级开发工程师的自我总结!
序言 目前形势,参加到iOS队伍的人是越来越多,甚至已经到供过于求了. 今年,找过工作人可能会更深刻地体会到今年的就业形势不容乐观,随着各大公司秋招的开始,很多小伙伴都行动起来了,我也有幸获得了一份不 ...
- head里两个重要标签base和meta
base标签 <base href="../"> 我们并不常用的一个标签,但是一旦用得不当会带来灾难性的影响. 它会影响到所有页面上的href和src属性相对路劲的定位 ...
- 2. Java内存区域
Java 虚拟机的内存模型分为两部分:一部分是线程共享的,包括 Java 堆和方法区:另一部分是线程私有的,包括虚拟机栈和本地方法栈,以及程序计数器这一小部分内存 2.1 程序计数器 程序计数器(Pr ...
- 计算机网络之iframe内联框架跨域
iframe框架同源下的数据调用 iframe框架非同源下的数据传输 一.iframe框架同源下的数据调用 1.父窗口向子窗口获取数据 //html1父级窗口 <iframe src=" ...
- Phoenix(SQL On HBase)
1.简介 Phoenix是一个HBase框架,可以通过SQL的方式来操作HBase. Phoenix是构建在HBase上的一个SQL层,是内嵌在HBase中的JDBC驱动,能够让用户使用标准的JDBC ...