<template>
	<view class="scrollList">
		<scroll-view style="min-height:100px;max-height: 450px;" :scroll-y="true" @scrolltolower="scrolltolower"  lower-threshold="2">
			<view class="list_item" v-for="item in list" :key="item.value" :class="value==item.value?'active':''" @click="select(item.value)">
				<view class="label">
					{{item.label}}
				</view>
				<view class="icon" v-if="value==item.value">
					<u-icon name="checkmark" color="#69BB73"></u-icon>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"scroll-list",
		props:{
			value:{
				type:[String,Number],
				default:null
			},
			list:{
				type:Array,
				default:()=>[],
			}
		},
		data() {
			return {
				total:0,
				query:{
					pageSize:10,
					pageNum:1
				}
			};
		},
		methods:{
			scrolltolower(){
				this.getlist("bottom")
			},
			select(val){
				this.$emit("input",val)
			}
		}
	}
</script>

<style lang="scss" scoped>
.scrollList{
	width: 100%;
	.list_item{
		height: 80rpx;
		line-height:80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		border-bottom: 1px solid #f3f3f3;
		&.active{
			background: rgba(105, 187, 115, 0.1);
		}
	}
}
</style>