camera

使用这个组件使用手机的拍摄功能.实现如下操作

打开拍摄画面,在手机上半屏显示拍摄取景,下面有一个拍摄按钮.点击后,取景器位置显示拍摄画面,下面显示确定取消按钮.

确定后,下方的预览图片列表添加刚才拍摄的画面.

        

这个功能实现时,发现两个麻烦的问题

camera是顶层控件,拍照后,画面无法覆盖在其上.

拍摄之后产生的图片列表,在上下划屏时闪烁不断,完全用不了.

 
camera部分,盖住取景器
  <camera class="camera" hidden='{{ispagescroll}}' device-position="back" binderror="error">

    <cover-image class="cover-image add-border {{cameraStatus==2?'show':'hide'}}" src="{{coverSrc}}"></cover-image>

  </camera>

在camera组件里,添加cover-image组件.当点击拍照按钮后,显示cover-image.这个组件可以覆盖在camera之上.

这两个组件的大小完全设为一样的 宽度100% 高度300px.

滑动时闪烁

向列表中添加图片后,页面变长,在上下划屏时,闪动的是取景器.还是这个camera的问题.如果去掉它,划屏时没问题.

暂时的解决方法是,在page的 onPageScroll 方法中监听页面滚动,  event.scrollTop>0 表示已经滚动了.将camera设为隐藏.就不闪了.

小程序-camera的更多相关文章

  1. 微信小程序苹果手机调用camera原生组件拍照后不退出

    最近做微信小程序时,用到小程序的原生组件camera时,踩到一个bug. 在给camera设置样式position:absolute;绝对定位后,IOS调用camera原生组件拍照后退不出来. 不使用 ...

  2. 也谈微信小程序

      小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念,用户不关心是否安装太 ...

  3. 微信小程序-图片、录音、音频播放、音乐播放、视屏、文件

    图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx ...

  4. 微信小程序多张图片上传

    微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api ...

  5. 微信小程序（有始有终，全部代码）开发--- 新增【录音】以及UI改进

    开篇语 寒假发了一篇练手文章,不出意外地火了: <简年15: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 > 后来又发了BUG修复的版本,出乎意料的火了: 简年18: ...

  6. 微信小程序（有始有终，全部代码）开发--- 新增模块： 图片选取以及拍照功能

    开篇语 前几天发了一篇: <简年15: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 > 后来又发了BUG修复的版本: 简年18: 微信小程序(有始有终,全部代码)开发 ...

  7. 【小程序】微信小程序实现各种特效实例

    写在前面 最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成,里面有一些常用的特效,总结一下,希望对大家和我都能有所帮助 实例1:滚动tab选项卡 先看一下 ...

  8. （干货）微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  9. 微信小程序之Todo

    wxAppTodos   todomvc提供了在当今大多数流行的JavaScript MV*框架概念实现的相同的Todo应用程序,觉得这个小项目挺有意思,最近在学习微信小程序,故用小程序做一版Todo ...

随机推荐

  1. beego 自定义控制器与路由

    框架浅析 这是之前使用bee创建的webapp目录层级结构: ├── conf 配置文件 │ └── app.conf ├── controllers 控制器 │ └── default.go ├── ...

  2. Day 4-11 re正则表达式

    正则表达式就是字符串的匹配规则,在多数编程语言里都有相应的支持,python里对应的模块是re '.' 默认匹配除\n之外的任意一个字符,若指定flag DOTALL,则匹配任意字符,包括换行 '^' ...

  3. npm install、npm install --save与npm install --save-dev区别

    npm install X: 会把X包安装到node_modules目录中 不会修改package.json 之后运行npm install命令时,不会自动安装X npm install X –sav ...

  4. jquery 设置cookie、删除cookie、获取cookie

    1.引入jquery.js <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> ...

  5. Javaweb小结之——JavaBean+持久层

    数据持久层学习了JDBC.连接池以及DBUtil 思考一下,在学会使用SSM框架之前,还是先多使用DBUtil吧 数据库持久层的JDBC.连接池和DBUtil,这个链接给我了一些参考https://b ...

  6. 导出数据到EXL表格中

    项目使用的是SSI框架,通过struts访问到action xml文件: <action name="fabAttributedaochu" class="com. ...

  7. 使用javaWeb的二大（Listener、Filter）组件实现分IP统计访问次数

    分析: 统计工作需要在所有资源之前都执行,那么就可以放到Filter中. 我们这个过滤器不打算做拦截操作!因为我们只是用来做统计 用什么东西来装载统计的数据.Map<String,Integer ...

  8. Sql Server 时间格式化

    0   或   100   (*)     默认值   mon   dd   yyyy   hh:miAM(或   PM)       1   101   美国   mm/dd/yyyy       ...

  9. Winform实现多线程异步更新UI（进度及状态信息）

    引言 在进行Winform程序开发需要进行大量的数据的读写操作的时候,往往会需要一定的时间,然在这个时间段里面,界面ui得不到更新,导致在用户看来界面处于假死的状态,造成了不好的用户体验.所以在大量数 ...

  10. pixel和nexus设备安卓9.0/8.1/7.1.x/6.x WiFi和信号图标出现叉x号或者感叹号的消除办 法

    在安卓9.0/8.1/8.0/7.1.2里如何消除x号(在老一点点版本是感叹号)呢? 1.首先开启usb调试,然后用数据线连接电脑和手机. 2.然后解决好您的adb驱动问题,具体教程见:http:// ...