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. Java Core - 序列化和反序列化

    把对象转换为字节序列的过程称为对象的序列化 把字节序列恢复成对象的过程称为对象的反序列化 一.对象的序列化的应用: 1.把对象的字节序列永久地保存到硬盘上,通常存放在一个文件中. 2.在网络上传送对象 ...

  2. Hive简单编程实践-词频统计

    一.使用MapReduce的方式进行词频统计 (1)在HDFS用户目录下创建input文件夹 hdfs dfs -mkdir input 注意:林子雨老师的博客(http://dblab.xmu.ed ...

  3. React Native之获取通讯录信息并实现类通讯录列表(ios android)

    React Native之获取通讯录信息并实现类通讯录列表(ios android) 一,需求分析 1,获取通讯录信息,筛选出通讯录里有多少好友在使用某个应用. 2,获取通讯录信息,实现类通讯录,可拨 ...

  4. 对于tomcat通过catalina.sh停止服务后，tomcat进程没有退出问题解决办法

    例:tomcat路径及名称为/data/apache-tomcat-7.0.67/ vim /data/apache-tomcat-7.0.67/bin/catalina.sh 找到org.apach ...

  5. UDP反射DDoS攻击原理和防范

    东南大学:UDP反射DDoS攻击原理和防范 2015-04-17 中国教育网络 李刚 丁伟 反射攻击的防范措施 上述协议安装后由于有关服务默认处于开启状态,是其被利用的一个重要因素.因此,防范可以从配 ...

  6. Python OpenCV人脸识别案例

    ■环境 Python 3.6.0 Pycharm 2017.1.3 ■库.库的版本 OpenCV 3.4.1 (cp36) ■haarcascades下载 https://github.com/ope ...

  7. Java使用RabbitMQ之订阅分发（Topic）

    使用RabbitMQ进行消息发布和订阅,生产者将消息发送给转发器(exchange),转发器根据路由键匹配已绑定的消息队列并转发消息,主题模式支持路由键的通配. 生产者代码: package org. ...

  8. 二、启用Docker支持

    一.使用

  9. vue axios 封装（一）

    封装一: 'use strict' import axios from 'axios' import qs from 'qs' import NProgress from 'nprogress' im ...

  10. Maven问题：Failure to transfer org.apache.maven

    Maven报错:Failure to transfer org.apache.maven 在创建Maven项目时,经常会在pom.xml的第一行处报错,提示信息如下: Failure to trans ...