<template>
<view>
<view v-show="!isShow" class="content_box" @click="showChange()">
<view class="">
{{value? value :'请选择'}}
</view>
<uni-icons v-if="!disabled" type="forward" color="#F8C303" size="20px" />
</view>
<view v-if="isShow" class="list-box" :style="{'top':top+'px'}" catchtouchmove="true">
<view class="list-box-content">
<view class="list-box-content-left">
<!-- 关闭按钮 -->
<view class="list-box-content-left-back">
<uni-icons @click="back" color="#fff" size="42rpx" type="back" />
<view class="title">
{{title}}
</view>
</view>
<scroll-view :style="{'height':height - top + 'px'}" scroll-y="true" :scroll-into-view='intoLetter'
scroll-with-animation>
<view class="list-box-content-left-item" v-for="item in list" :key="item">
<view class="list-box-content-left-item-title" :id="item.letter">
{{item.letter}}
</view>
<view class="list-box-content-left-item-content" v-for="(child,index) in item.data"
:key="child.id" @click="selectItem(child)">
{{child.name}}
</view>
</view>
</scroll-view>
</view>
<view class="list-box-content-right">
<view class="list-box-content-right-item" v-for="(item,index) in list" :key="index"
@click="scorllChange(item.letter)">
{{item.letter}}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "selectList",
props: ['list', 'disabled', 'value', 'title'],
data() {
return {
isShow: false,
intoLetter: 'A',
top: 0,
height: 0,
}
},
methods: {
showChange() {
console.log('接受的数据', this.$props.list);
if (this.$props.disabled === 'true') return
if (this.$props.list?.length === 0 || this.$props.list === null) {
return uni.showToast({
title: '暂无数据',
duration: 1000,
icon: 'none'
})
}
this.isShow = true
},
// 选择操作
selectItem(child) {
console.log(child);
this.$emit('select', child)
this.isShow = false
this.intoLetter = 'A'
},
// 滚动索引
scorllChange(index) {
this.intoLetter = index
},
// 关闭操作
back() {
this.isShow = false
}
},
onReady() {
this.intoLetter = 'A'
console.log('穿的数据', this.$props.list);
this.top = uni.getMenuButtonBoundingClientRect().top
this.height = uni.getSystemInfoSync().windowHeight - this.top
}
}
</script>
<style lang="less">
.list-box {
position: fixed;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #fff;
&-content {
display: flex;
&-left {
width: 100%;
&-back {
position: relative;
padding: 15rpx;
border-bottom: 1px solid #eee;
background-color: #F8C303;
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 30rpx;
}
}
&-item {
&-title {
padding: 15rpx;
display: flex;
flex: 1;
align-items: center;
color: #000;
background-color: #eee;
font-size: 28rpx
}
&-content {
display: flex;
align-items: center;
padding: 15rpx;
color: #000;
border-bottom: 1px solid #eee;
}
}
}
&-right {
position: sticky;
right: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
&-item {
display: flex;
justify-content: center;
color: #000;
font-size: 28rpx;
padding: 10rpx;
}
}
}
}
scroll-view {
width: 100vw;
}
.content_box {
position: absolute;
width: 100%;
top: 50%;
transform: translate(0, -50%);
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
二版: