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设为隐藏.就不闪了.