uniapp直播项目学习笔记2

1.如何设置使live屏幕占满整个屏幕

 因为nvue是基于weex，页面布局默认是flex 所以我们给根view设置flex:1,然后使video组件的样式也是flex:1，则video组件即可占满整个屏幕

 

 

2.在onload中通过uni.getSystemInfoSync()获取当前用户系统信息，动态获取手机导航栏款高度，statusBarHeight，动态设置页面不至于遮住用户手机导航栏。

	data() {
			return {
				statusBarHeight:0
			}
		},
    onLoad(){
       let res = uni.getSystemInfoSync()
       this.statusBarHeight  = res.statusBarHeight
    
    },

3.nvue里面只有在text标签里才能写文字并设置其样式。

4.礼物自动刷新功能实现思路

   1.先写一个假数据，在vue自带的生命周期函数里定义一个函数，每三秒推送一条礼物数据到data中的礼物数据里。注：写的时候发现uniapp自带的onload无法使用定时器拿到数据。

		created(){
			setInterval(()=>{
				this.gifts.push({
					username:"发送人",
					avatar:"",
					gift_name:"蛋糕",
					gift_image:"/static/gift/3.png",
					num:1
				})
                // 每次push礼物数据进giftList后调用刷新到底部的方法
				this.toBottom()
			},3000)
		},

2. 页面使用nvue里的list组件提高性能，但只在app端有效，里面的item需要被cell嵌套。

3.v-for循环data里的数据渲染礼物列表。动态绑定一个ref 好拿到每个礼物数据的实例对象，取名就定义为当前item加其index。

	<list style="width: 520rpx;height: 500rpx;" :show-scrollbar="false" :bounce="false">
		<cell class="flex align-center px-3 pt-3" v-for="(item,index) in gifts" :key="index" insert-animation="default" delete-animation="default" :ref="'item'+index">
			<view style="width: 325rpx;background-image: linear-gradient(to right, #BCABB1 , #65AAF0);" class="flex rounded-circle">

4.用weex引入dom对象，好方便接下来进行相应的dom操作

	const dom = weex.requireModule('dom')

5.定义刷新到底部的方法，

外层嵌套一个$nextTick，以便每次刷新礼物数据时才调用刷新到底部的方法。

nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。

weex中的方法定义：

 

scrollToElement

让页面滚动到 ref 对应的组件，这个 API 只能用于可滚动组件的子节点，例如 <scroller>，<list>, <waterfall> 等可滚动组件中。

#scrollToElement(ref, options)

• @ref，要滚动到的那个节点。
• @options
  • offset，一个到其可见位置的偏移距离，默认是 0。
  • animated，是否需要附带滚动动画，默认是 true。

// 置于底部
			toBottom() {
				this.$nextTick(()=>{
         
					let index = this.gifts.length - 1
          // ref的key值
					let ref = 'item' + index
					if(this.$refs[ref]){
          
           console.log(this.$refs[ref])
						dom.scrollToElement(this.$refs[ref][0],{})
					}
				})
			}
		},

注:在v-for中，引用信息将是包含dom节点和组件实例的数组，当ref值不同时，this.$refs[ref名称]无法获取对应的DOM节点或是组件，需要在其后追加[0]才可访问.