今天我朋友忽然问了我一句,他老板要求小程序相机有网格线,咋实现,我一听,顿时懵逼了。这小程序相机不是直接调接口直接打开手机相机吗,这咋加?我直接自信的告诉他,做不到!
过了几分钟,他给我发了一张相机带身份证框的图片,卧槽!对耶,那这是咋做到的。好吧,那就只能仔细想想到底是如何实现的。终于!让我在小程序官方文档里发现了一个组件:camera。emmmm,原来还有这个吗???原谅我一直以来都是直接调用相机接口功能,今天才知道还有这个组件。既然知道了,那实现起来就很简单了。
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;">
<view class="test">
<cover-view class="item">1</cover-view>
<cover-view class="item">2</cover-view>
<cover-view class="item">3</cover-view>
<cover-view class="item">4</cover-view>
<cover-view class="item">5</cover-view>
<cover-view class="item">6</cover-view>
<cover-view class="item">7</cover-view>
<cover-view class="item">8</cover-view>
<cover-view class="item">9</cover-view>
</view>
</camera>
.test {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
}
.item {
border: 1px solid #ccc;
}
另外要注意的是在使用grid布局的时候,cover-view是不支持grid属性的,我一开始用了cover-view,结果不起效果,看了大半天,都不明白写的有啥问题。使用view就可以了。