zoukankan      html  css  js  c++  java
  • 小程序-camera

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

  • 相关阅读:
    网站搜索功能lucene
    RabbitMQ消息队列
    zookeeper
    RPC+SOA+dubbo
    石英定时任务-quartz
    通用mapper、图片上传、nginx
    通用mapper和分类实现
    后台商品管理功能实现
    构建框架
    海量数据的并发处理
  • 原文地址:https://www.cnblogs.com/mirrortom/p/9320980.html
Copyright © 2011-2022 走看看