nvew text换行

https://www.cnblogs.com/chenshaoxiong/p/15505213.html
https://www.cnblogs.com/robot666/p/14987404.html

 

<view class="bottom-msg-area lst">
            <scroll-view class="msg-area-scroll" scroll-y="true" scroll-with-animation
                :scroll-into-view="scrollIntoView">
                <view class="">
                    <text class="pingtai-tips">{{broadcastData.admin_info}} </text>
                    <text class="zhubo-tips">{{broadcastData.mer_info}}</text>
                </view>
                <view v-for="(item,i) in historyChat" :id="'danmu'+item.reply_id" :key="i">
                    <view class="listview" >
                        <!-- <text class="lin-msg-name">{{item.user.nickname}}：</text>
                        <text class="lin-msg-content">{{item.comment}}</text> -->
                        <rich-text :nodes="richNodes(item)"></rich-text>
                    </view>
                </view>
            </scroll-view>
        </view>


// js 逻辑 （ h5 ）
richNodes(item) {
                return [
                    {
                        name: 'div',
                        attrs: {
                            class: 'div-rich-nickname',
                            style: 'color: #50c76f;display: contents;'
                        },
                        children: [
                            {
                                type: 'text',
                                text: item.user.nickname+'：'
                            }
                        ]
                    },
                    {
                        name: 'div',
                        attrs: {
                            class: 'div-rich-comment',
                            style: 'color: #fff;display: contents;'
                        },
                        children: [
                            {
                                type: 'text',
                                text: item.comment
                            }
                        ]
                    }
                ]
            }


 //（ app ）
richNodes(item) {
                return [{
                    children: [{
                            type: 'text',
                            attrs: {
                                class: 'lin-msg-name'
                            },
                            text: item.user.nickname + '：'
                        },
                        {
                            type: 'text',
                            attrs: {
                                class: 'lin-msg-content'
                            },
                            text: item.comment
                        }
                    ]
                }]
            }


//样式
.listview {
        padding: 6rpx 10rpx;
        margin: 10rpx 0;
        border-radius: 10rpx;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .lin-msg {
        font-size: 22rpx;
        flex-direction: row;
    }
    .lin-msg-name {
        font-size: 26rpx;
        color: #50c76f;
        /* 可能是组件 rich-text 的问题，有默认的白色背景颜色，这里要给透明*/
        background-color: rgba(0, 0, 0, 0);
    }
    .lin-msg-content {
        font-size: 26rpx;
        color: #FFFFFF;
        background-color: rgba(0, 0, 0, 0);
    }

以下面的为示例：采用rich-text代替红色加粗部分

<list class=”listview” :scrollable=”true” :scroll-y=”true” :show-scrollbar=”false”
id=”msgScroll” ref=”msgScroll”>

<cell v-for=”(item, index) in messageList” :key=”item.msgId” >
<div class=”cell”>
<!– <text class=”msg-name”>{{item.name}}</text>
<text class=”msg-item”>{{item.message}}</text> –>
<rich-text :nodes=”richNodes(item)”></rich-text>
</div>
</cell>
<cell class=”cell”>
<text class=”msg-itemGao”>公告:平台公告:欢迎来到直播间!苏跃小Q直播倡导绿色直播，如果直播间出现违法违规行为，请及时举报。为了您的购物安全，请在右下角”小红袋”官方渠道选购商品</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;
}