<template>
	<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="true" @scroll="scrollBottom" :class="scrollFalg ? 'pb-5' : ''">
		<view class="cavasation my-1" v-for="(item,index) in datalist" :key="index+''">
			<view class="person">
				<u-avatar :src="item.avatar" size="80"></u-avatar>
				<span class="ml-1">{{item.name}}</span>
			</view>
			<view class="content">
				<span class="text">{{item.content}}</span>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "chat",
		data() {
			return {
				scrollFalg:false,
				datalist:[
					{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
					{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
					{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
					{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
					{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
					{avatar:"../../static/images/礼物@2x.png",name:"主播",content:"课程生动有趣"},
				]
			}
		},
		methods:{
			scrollBottom(){
				console.log("333")
				this.scrollFalg = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ml-1{
		margin-left: 10rpx;
	}
	.my-1{
		margin: 10rpx 0;
	}
	.pb-5{
		padding-bottom: 50rpx;
	}
	.chat{
		box-sizing: border-box;
		height:calc(100vh - 500rpx);
		padding: 40rpx;
		// font-size: 26rpx;
		letter-spacing:2rpx;
		.person{
			display: flex;
			align-items: center;
		}
		.content{
			line-height: 80rpx;
			margin-left: 80rpx;
			.text{
				display: inline-block;
				border-radius: 10rpx;
				padding: 0 24rpx;
				box-shadow: 5rpx 5rpx 10rpx #dedede;
			}
		}
	}
</style>
