<cover-view class="content" >

<cover-view class="chat" id="chat" sroll-top="{{srollTop}}" >

<cover-view id="bianjie">

<cover-view class="chatItem" wx:for="{{chatList}}" wx:for-item="chat" wx:key>

<cover-view class="chatName">{{chat.name}}:</cover-view>

<cover-view class="chatContent">{{chat.content}}</cover-view>

</cover-view>

</cover-view>

</cover-view>

</cover-view>

下面是样式：

.content {

height: 100%;

width: 100%;

display: flex;

}

.chat {

display: flex;

position: absolute;

bottom: 0;

left: 0;

height: 30%;

width: 90%;

border: solid;

overflow-y: scroll;

flex-direction: column-reverse;

}

.chatItem {

display: flex;

overflow: hidden;

width: 100%;

}

.chatName {

width: 10%;

}

.chatContent {

width: 90%;

word-wrap: break-word;

word-break: break-all;

white-space: pre-wrap;

}

预期效果：有滚动条

代码片段：https://developers.weixin.qq.com/s/OgnHG9mo7FbY