在开发蓝牙调试app的过程,需要显示接收到的蓝牙硬件信息,主要需求是要求新收到的信息能够显示到显示区域。
如上图所示,第一个框为接受信息显示框,显示框在每次接收到信息化后自动向上滚动,以便显示最近收到的信息。 详细代码如下:
<scroll-view :scroll-with-animation="true" style="width:80%;margin-left:10%;height:55vh; border:1px solid #30a2a4;border-radius:5px;" :scroll-y="true" :scroll-into-view="scrollIntoViewId">
<view v-for="(item, index) in printInfo" :id="'scroll'+index" style="width:100%;margin-left:0px;">
<textarea v-model="item.value" auto-height style="width:100%;height:auto;border:0;"></textarea>
</view>
<view id="scrollBottom" style="margin-left:0px;width:99%;height:30px;"></view>
</scroll-view>
有几个注意的点,记录一下:
1、不滚动
处理:需要在scroll-view上加上属性 :scroll-with-animation="true"
2、每次滚动,只滚动到view的上边线,不显示内容
处理:需要在最后面加上一个空的view, 即:<view id="scrollBottom" style="margin-left:0px;width:99%;height:30px;"></view>
其他,具体滚动到那个view,只需要在js代码中控制变量“scrollIntoViewId”的值