类似淘宝的购物网站 建设,网站开发要学多久,wordpress如何防止ddos,3090服务器租用1、在直播页面的弹幕评论中#xff0c;我们希望的样式是#xff1a; 观众名字#xff1a;评论
而且颜色有所区分#xff0c;并在同一行显示
2、我们希望在发弹幕的时候可以回自动滚动到自己发的内容那里
一#xff1a;弹幕样式修改
因为是小白#xff0c;前端对于样式这…1、在直播页面的弹幕评论中我们希望的样式是 观众名字评论
而且颜色有所区分并在同一行显示
2、我们希望在发弹幕的时候可以回自动滚动到自己发的内容那里
一弹幕样式修改
因为是小白前端对于样式这一块实在是太难了只能一边百度学习一边修改踩坑无数最终达到自己想要的效果在此记录一下。
1.1目标效果图
1.2踩坑记录
(我这个使用的是nvue页面在使用大佬的页面模板下样式发生了改变只能自己慢慢修改调整)
因为这个名字和弹幕内容需要颜色区分开所以我本来打算的是使用两个text组件颜色分别设置最后给父元素使用flex-direction: row让他们在同一行即可但是这样使用的话会导致弹幕文字直接溢出灰色背景不会换行如果再给它的父元素添加flex-wrap: wrap;很不幸这样不仅导致子元素全部换行也就是名字和弹幕占据两行而且文字的溢出也没有解决实在是头大最终还是找到大佬的解决方案(https://www.cnblogs.com/robot666/p/14987404.htmlhttps://www.cnblogs.com/robot666/p/14987404.html)使用一个rich-text替代两个text在这里分别设置不同的样式和内容
1.3代码
这是templete代码里面我使用:style{ width: computedWidth(item) rpx 来设置弹幕的灰色背景使其有不同宽度的背景
view idscroll-view-contentview classremind{{ remind }}/viewview classmainview classplMaim v-for(item, index) in danmuData :keyindex :iditem- index:style{ width: computedWidth(item) rpx }!-- text classmyName{{ item.name }}/texttext classmyPl{{ item.content }}/text --rich-text :nodesrichNodes(item)/rich-text/view/view/view
下面是script代码可以根据自己情况设置
richNodes(item) { //弹幕样式计算return [{children: [{type: text,attrs: {style: color: #a1e5fc; font-size: 32rpx; line-height: 36rpx; padding: 8rpx; border: #ffff7f solid 1px;},text: item.name },{type: text,attrs: {style: color: #ffffff; font-size: 32rpx; line-height: 36rpx; padding: 8rpx; border: #ffff7f solid 1px; },text: item.content}]}];}
二、发送弹幕自动滚到内容处
2.1方式一滚动视图减去不需要的视图高度
这个我先使用百度到的方式原理是uni .createSelectorQuery().in(this)使用这个api获取到可滚动视图的总高度通过减去弹幕区域固定的高度剩余的就是我们不需要的高度我们只需要将这个剩余高度设置为可滚动区域的顶部就相当于滚动到弹幕底部了代码我放在下面。但是我在使用这个时出现了问题具体报错如下图我研究了好一会但是不明白只能采用第二个方式。
scroll-view :style{ height: scrollViewHeight px } :scroll-ytrue :scroll-topscrollTop
:scroll-with-animationtrue :scroll-y-barfalse show-scrollbar classscrollView refscrollViewRef
view idscroll-view-content
view classremind{{ remind }}/view
view classmain
view classplMaim v-for(item, index) in danmuData :keyindex
:style{ width: computedWidth(item) rpx }
!-- text classmyName{{ item.name }}/text
text classmyPl{{ item.content }}/text --
rich-text :nodesrichNodes(item)/rich-text
/view
/view
/view
/scroll-view
script
export default {data() {return {
//滚动条位置scrollTop: 0,scrollViewHeight: 191, //滚动视图的高度}}
}
methods: {
//发送按钮
sendOut() {if(this.content){const list {name: this.nickname,content: this.content,};this.danmuData.push(list);this.content this.scrollToBottom();
}},
//根据内容自动滚动scrollToBottom() {this.$nextTick(() {uni.createSelectorQuery().in(this).select(#scroll-view-content).boundingClientRect((res) {let top res.height - this.scrollViewHeight;if (top 0) {this.scrollTop top;}}).exec();});},
}
/script
2.2方式二根据索引滚动到指定位置
可以在展示每条弹幕消息中加上索引:iditem- index根据索引滚动
scroll-view :style{ height: scrollViewHeight px } :scroll-ytrue :scroll-with-animationtrue :scroll-y-barfalse show-scrollbar classscrollView :scroll-into-viewscrollToViewview idscroll-view-contentview classremind{{ remind }}/viewview classmainview classplMaim v-for(item, index) in danmuData :keyindex :iditem- index:style{ width: computedWidth(item) rpx }!-- text classmyName{{ item.name }}/texttext classmyPl{{ item.content }}/text --rich-text :nodesrichNodes(item)/rich-text/view/view/view/scroll-view 在点击发送按钮后执行下面的方法把当前用户的名字发送过来进行匹配获取最后一个即可
//根据索引滚动scrollToBottom(name) {this.$nextTick(() {const index this.danmuData.map((item, i) item.name name ? i : -1).filter(i i ! -1).pop(); // 获取最后一个匹配项的索引if (index ! undefined) {this.scrollToView item- index;}});},
