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. Linux查看和注销用户（User）

    Linux如何注销其他用户?_Linux教程_Linux公社-Linux系统门户网站https://www.linuxidc.com/Linux/2012-07/64939.htm linux注销指定 ...

  2. jdk下载及环境变量配置

    一.下载 下载链接 二.环境变量:

  3. spark、standalone集群 （1）

    1.配置 spark/apache/org 下载解压, 安装jdk1.8 2.准备服务器 3.设置hostname 4.关闭防火墙 开启: service iptables start 关闭: ser ...

  4. [转帖]浏览器的F5和Ctrl+F5

    浏览器的F5和Ctrl+F5 https://www.cnblogs.com/xiangcode/p/5369084.html 在浏览器里中,按F5键和按F5同时按住Ctrl键(简称Ctrl+F5), ...

  5. [转帖]Windows 10新预览版上线：可直接运行任意安卓APP了

    Windows 10新预览版上线:可直接运行任意安卓APP了 http://www.pcbeta.com/viewnews-80316-1.html 今晨(3月13日),微软面向Fast Ring(快 ...

  6. 头文件带和不带.h的区别

    所有C++标准库的头文件都是没有.h结尾的.这么做是为了区分,C标准库的头文件和C++标准库的头文件.比如最具代表性的: #include <string.h> // C 标准库头文件,包 ...

  7. linux下编译tex,bib成pdf文件

    参考linux下编译bib.tex生成pdf文件 为了编译出出正确的pdf文件,需要执行4条命令完成整个编译过程. 编译命令及输出 $ pdflatex bb.tex #目录下会生成bb.aux.bb ...

  8. .Net在操作mysql查询的时候出现“: Unknown column 'UserName' in 'where clause'”错误

    今天使用.Net操作mysql查询的时候,如果加上条件查询的时候就会出现 Unknown column 'UserName' in 'where clause'这个错,不加条件直接select * f ...

  9. php2

    session   //将用户的会话数据存储在服务端,通过 session_start()开启session,通过$_SESSION读写session session_start(); //开启ses ...

  10. Reversing-x64Elf-100

    一道很简单的小题 作为python小白这道题主要是学习了一点python知识...... 可以看出来 sub_4006FD 这个函数是用来判断输入密码是否正确的 我们看一下它的伪代码: signed ...