Uniapp drop-down layer selection box effect demo (sorting)

design sketch ：

<template>
	<picker @change="onRecipientChangeSelect" :value="recipientIndex" :range="recipient" range-key="name">
	<view class="uni-input p-0 txtFont">
		<!-- {
    {
    recipient[recipientIndex].name}}<text class="iconfont icon-xia font-sm pl-1"></text> -->
		{
    {
    shopName}}<text class="iconfont icon-xia font-sm pl-1"></text>
	</view>
</picker>
</template>

<script>
	export default{
    
		data() {
    
			return {
    
				shopName: ' All ',
				recipient: [
					{
    
						id: 18,
						name: " store 01"
					},
					{
    
						id: 19,
						name: " Store word count super long store word count super long store word count super long store word count "
					},
					
				],
				recipientIndex: 0,
				dataObject: {
    },
			}
		},
		methods: {
    
			onRecipientChangeSelect(e) {
    
				console.log(' Carrying value is ', e.detail.value)
				// this.recipientIndex = e.detail.value		// Select the ordinal of the array 
				this.dataObject.shopId = this.recipient[e.detail.value].id;	// Select store id
				this.dataObject.shopName = this.recipient[e.detail.value].name;	// Select store name
			},
		}
	}
</script>