需求背景：
在做一个直播聊天室（主播页用了nvue）聊天室显示访客进来的昵称和消息内容字体得分开显示。例如：
难题所在：
开始就以为是写的样式得问题。为了一行，flex-direction: row; 该属性试了但是确实可以同行，但是不会换行。众所周知：nvue下得文字必须在text标签下才能显示正常，不然你的样式就不起效果了（会是默认得样式和字体，一半很丑）。但是如果你里面只用一个text标签显示肯定就是没用问题的......就是一半UI不给这么干！
解决问题
以下面的为示例：采用rich-text代替红色加粗部分
<list class="listview" :scrollable="true" :scroll-y="true" :show-scrollbar="false"
官方渠道选购商品</text>
</cell>
</list>
逻辑部分：
richNodes(item){
return [{
children: [
{
type: 'text',
attrs: {
class:'msg-name'
},
text: item.name+':'
},
{
type: 'text',
attrs: {
class:'msg-item'
},
text: item.message
}
]
}]
}
css部分：
.listview {
width: 500rpx;
height: 500rpx;
border-radius: 20rpx;
transform: rotate(180deg);
flex:1;
padding:0 10rpx;
}
.cell {
padding: 6rpx;
margin: 6rpx 0;
border-radius: 10rpx;
background-color: rgba(0, 0, 0, 0.3);
transform: rotate(180deg);
}
.msg-name {
color: #fed93a;
font-size: 32rpx;
}
.msg-item {
color: #f3f3f3;
font-size: 32rpx;
}
感悟：
在vue能用的css在nvue里未必行得通啊。天无绝人之路。加油。奥里给！