1.使用插件popup可提供弹出层进行弹幕输入。
2.弹幕滚动实习则可在scroll-view组件上定义scroll-into-view属性:值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素。
故可在循环渲染时为item绑定自定义id,例如id="danmu"+item.id,然后将scroll-into-view进行动态绑定,每次在弹幕输出的时候调用方法获取最后一个item的id动态赋值给scroll-into-view,实现弹幕滚动。
<scroll-view scroll-y="true" style="width: 520rpx;height: 300rpx;" scroll-with-animation class="pl-3" :scroll-into-view="scrollInToView">
methods: {
// 发送弹幕
send(data){
this.list.push(data)
// 置于底部
this.toBottom()
},
toBottom() {
setTimeout(()=>{
let len = this.list.length
if(len > 0 && this.list[len - 1]){
this.scrollInToView = 'danmu' + this.list[len - 1].id
}
},200)
外层调用弹幕组件的在组件标签内绑定ref再用$refs拿到实例进行调用即可。
3.送礼物功能实现思路,点击的时候拿到选中礼物的id,然后在gifts(拥有的礼物列表数据)用indexof拿到该礼物对象,再调用send方法进行发送礼物。
// 绑定点击事件,拿到选中礼物的id
@click="giftActiveId = item.id"
sendGift(){
if(this.giftActiveId === 0){
return uni.showToast({
title: '请选择要发送的礼物',
icon: 'none'
});
}
let index = this.gifts.findIndex(item=>item.id === this.giftActiveId)
if(index === -1){
return
}
let g = this.gifts[index]
this.$refs.gift.send({
username:"发送人",
avatar:"",
gift_name:g.name,
gift_image:g.image,
num:1
})
this.closeGift()
}