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. JavaScript修改DOM节点时，样式优先级的问题

    通过element.style.xxx设置或者读取的xxx样式属性,都是属于行间样式(<p style="color=red"></p>),并不是 使用li ...

  2. HTML，CSS笔记

    text-indent 属性规定文本块中首行文本的缩进.允许使用负值.如果使用负值,那么首行会被缩进到左边.p{ text-indent:50px; } HTML <label> 标签的 ...

  3. [转帖]Kerberos和NTLM - SQL Server

    Kerberos和NTLM - SQL Server https://www.cnblogs.com/dreamer-fish/p/3458425.html 当我们使用Windows Authenti ...

  4. Mysql DBA 运维 MySQL数据库索引优化及数据丢失案例 MySQL备份-增量备份及数据恢复基础实战 MySQL数据库生产场景核心优化

    需要的联系我,QQ:1844912514

  5. PHP二维数组（或任意维数组）转换成一维数组的方法汇总（实用）

    目录 1 array_reduce函数法 2 array_walk_recursive函数法 3 array_map函数法 假设有下面一个二维数组: $user = array( '0' => ...

  6. python中的__init__和__new__的区别

    一.__init__ 方法是什么?(init前后的线是双下划线) 使用Python写过面向对象的代码的同学,可能对 __init__ 方法已经非常熟悉了,__init__ 方法通常用在初始化一个类实例 ...

  7. WPF Image控件的绑定

    在我们平时的开发中会经常用到Image控件,通过设置Image控件的Source属性,我们可以加载图片,设置Image的source属性时可以使用相对路径也可以使用绝对路径,一般情况下建议使用绝对路径 ...

  8. vue实例相关2

    vue data中 对象/数组 不为空,即使定义为[]/{} new Vue({ el: '#main', data: { list: [], current: {}, aa:'' } }) cons ...

  9. sql行转列实例

    select gh ,xm , max(A.bz) as bz , max(A.jcz) as jcz , max(A.dl) as dl , max(A.czzx) as czzx , max(A. ...

  10. 在 Web 页面中使用离线地图

    1. 所需工具&插件: 1. MapDownloader (提取码: spx6) 2. GISMysqlToLocalFile (提取码: vus6) 3. Leaflet 2. 操作: 1. ...