uniapp text标签实现滚动条

博主： huoyu
发布时间：2023 年 12 月 21 日
190 次浏览
暂无评论
886字数
分类： Uniapp

## 布局页面

```js

<scroll-view style="display: flex;width: 100%;height:630rpx;margin-left:2%;" :scroll-top="log_scrollTop"scroll-y="true">
    <text class="text_log" style="white-space: pre-wrap;height:630rpx;">{{out_log}}</text>
</scroll-view>
```

## Css代码

```css
.content {
    .text_log {
        background-color: black;
        color: green;
        width: 96%;
        display: inline-block;
        white-space: pre-wrap;
        word-wrap: break-word;
        height: auto;
        overflow-y: auto; //搭配scroll-y="true"实现滚动条

}
}
```

## js代码

```js
watch: {
    out_log() {
        this.$nextTick(() => this.scrollToBottom()); //滚动到最后 可要可不要
    }
},
mounted() {
    this.$nextTick(() => this.scrollToBottom()); //滚动到最后 可要可不要
}
```

## 上面调用的方法

```js
scrollToBottom() { //实现日志到最下面
    uni.createSelectorQuery().select(".text_log").boundingClientRect(rect => {
        if (rect) {
            this.scrollTop = rect.height;
        }
    }).exec();
},
add_log(logtext) { //日志追加
    this.out_log = this.out_log + logtext + "\n"
}
```

最后修改：2023 年 12 月 21 日