65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
<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> |