uniapp直播项目学习笔记3-送礼物功能

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()
			}