uniapp框架下scroll-view使用注意事项

原创于 2024-09-23 14:40:13 发布 · 689 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #scroll-veiw #滚动

在开发蓝牙调试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”的值