uniapp 直播每次发消息,滚动条都在底部
组件布局
组件创建一个滚动的聊天列表:
<scroll-view class="bottom-t" :scroll-y="true" :show-scrollbar="false" scroll-with-animation="true"> <view class="bottom-t-t"> <view class="bottom-t-t-t" v-for="(v,i) in chatList" :key="i"> <text class="bottom-t-t-text">v.name:v.content </text> </view> </view> </scroll-view>
JavaScript 逻辑, 向chatList
数组的开头添加一个新的聊天消息:
this.chatList.unshift({ name: '我大哥3', content: this.commentInputValue });
CSS 样式
.bottom-t { width: 600rpx; height: 400rpx; margin-bottom: 30rpx; margin-top: 12rpx; border-radius: 10rpx; transform: rotate(180deg); } .bottom-t-t { margin-bottom: 20rpx; } .bottom-t-t-t { padding: 10rpx; border-radius: 8rpx; background-color: rgba(0, 0, 0, 0.4); margin-top: 10rpx; } .bottom-t-t-text { color: #fff; font-size: 26rpx; transform: rotate(180deg); }