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設為隱藏.就不閃了.