关于uniapp 小程序的下拉框搜索选择

写uniapp写小程序遇到一些页面组件的使用，下拉选择框搜索选择框，

1.下拉选择组件，这个组件摘抄一个博主的时间太久忘记出处了，我也是第一次用uniapp写小程序，这个下拉框其实不太满意，我自己改了一下，因为数据没得时候下拉框不消失我就吧
禁掉了然后引用的时候少了 :noData =‘没有了’，原本的搜索有问题我也改了一下，如果有更好的处理方式大哥说一下

	
		
			 0" :lower-threshold="10" @scrolltolower="scrolltolower">
				
					{{ item[labelName] }}
				
			
			<!-- {{ noData }} -->
		
	



export default {
	props: {
		/** 展示整体组件 */
		show: {
			type: Boolean,
			default: false
		},
		/** 需要展示的列表 */
		list: {
			type: Array,
			default: () => []
		},
		/** 自定义label */
		labelName: {
			type: String,
			default: 'label'
		},
		/** 自定义value */
		valueName: {
			type: String,
			default: 'value'
		},
		/** 无内容时显示的内容  */
		noData: {
			type: String,
			default: '暂无匹配内容...'
		},
		/** item的对齐样式 */
		align: {
			type: String,
			default: 'left',
			validator: value => {
				return ['left', 'center', 'right'].includes(value);
			}
		},
		/** 自定义item展示样式 */
		customStyle: {
			type: Object,
			default: () => ({})
		}
	},
	computed: {
		/** 设置item的样式 */
		setItemStyle() {
			const { align, customStyle } = this;
			return {
				textAlign: align,
				...customStyle
			};
		}
	},
	methods: {
		/** item点击事件 */
		click(item) {
			this.$emit('select', { ...item });
		},
		/** 触底加载下一页 */
		scrolltolower() {
			this.$emit('scrolltolower');
		}
	}
};



.index {
	width: 100%;
	position: absolute;
	z-index: 9;
}

.search {
	.list,
	.empty {
		padding: 10rpx;
		background-color: #fff;
		box-shadow: 0 0 10rpx #888;
		border-radius: 10rpx;
	}

	.list {
		box-sizing: border-box;
		max-height: 300rpx;
		overflow: hidden;

		.item {
			padding: 8rpx 0;
			font-size: 26rpx;
			margin: 5rpx 0;

			&-hover {
				background-color: #f5f5f5;
			}
		}
	}
	.empty {
		height: 80rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

1.1 页面引用

import FuzzyList  from "../../node_modules/components/qj-fuzzy-search/index.vue"

1.2引用代码，label-name=“mcName”，mcName换成自己的，value-name=“mcId” mcId换成自己的 :list=“company” company是后台数据

	
						<!--  -->

1.3里面的方法，我也改了不然搜索实现不了

//data中定义的变量
queryParams: {
					pageSize: 10,
					pageNum: 1
				},
				show_sf: false,
				value_sf: '',
//
scrolltolower_sf() {
				console.log("0000000000000000000000")
				this.queryParams.pageNum++;
				this.getList();

			},

			select_sf(event) {
			//这个地方两个变量设置为空你们不用管，我是为了实现没得数据的时候，写入的数据是新数据，后端需要录入，如果没这个要求可以吧，可以吧1中我禁掉的代码放开，在引用的组件中加入:noData ='没有了'，就可以了
				this.form.msTakeId = '';
				this.form.msTakeName = '';
				
				console.log("event", event)
				this.show_sf = false;
				
				this.value_sf = event.msName;
				//这里是数据放入提交的表单中去
				this.form.msTakeId = event.msId;
				this.form.msTakeName = event.msName;
				
			},
			getList() {

				//this.shoufaList = this.shoufa;
				/** 输入框内有值就进行搜索，没有值就关闭 */
				if (this.value_sf != '') {
				这个地方新的数组来接收 上面定义的没写，不去接收includes不生效我也不知道咋回事，
					this.shoufa = [];
					this.shoufa = this.shoufaList.filter(item => item.msName.includes(this.value_sf))
					if (!this.show_sf){
					this.show_sf = true;
					} 
					//console.log("this.", this.shoufa.filter(item => item.msName.includes(this.value_sf)))



				} else {
				//这地方是后端的数据我用两个数据去接收的，当选择后又不选择就去赋值；
					this.shoufa = this.shoufaList;
					this.show_sf = false;
				}
			},

2.单纯的下拉框选择框适合数据量少的，这个我也是改过得，因为原来的不可做任何数据的选择新增的labelName和valueName

	
		
		
			^
		
		
			
				{{item[labelName]}}
			
		
	



	/**
	 * easy-select
	 * @author Snoop zhang
	 * @description Select Component
	 * */
	const COMPONENT_NAME = 'easy-select'
	const MAX_OPTIONS_HEIGHT = 137 // 修改务必也修改easy-select-options的css部分
	const OPTIONS_ITEM_HEIGHT = 33 // 修改务必也修改easy-select-options-item的css部分
	const OPTIONS_MARGIN = 10
	const OPTIONS_PADDING = 6 * 2 + 2 // + 2是border
	const OPTIONS_OTHER_HEIGHT = OPTIONS_MARGIN + OPTIONS_PADDING
	const STORAGE_KEY = '_easyWindowHeight'
	const SIZE = {
		'medium': {
			width: '240px',
			height: '40px'
		},
		'small': {
			width: '200px',
			height: '30px'
		},
		'mini': {
			width: '160px',
			height: '30px'
		}
	}
	
	export default {
		name: COMPONENT_NAME,
		props: {
			windowHeight: {
				type: [Number, String],
				default: 0
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			value: {
				type: String,
				default: 'lable'
			},
			/** 自定义label */
			labelName: {
				type: String,
				default: 'value'
			},
			/** 自定义value */
			valueName: {
				type: String,
				default: 'lable'
			},
			size: {
				type: String,
				default: 'medium'
			},
			options: {
				type: Array,
				default () {
					return [{
						value: '选项1',
						label: '黄金糕'
					}, {
						value: '选项2',
						label: '双皮奶'
					}, {
						value: '选项3',
						label: '蚵仔煎'
					}, {
						value: '选项4',
						label: '龙须面'
					}, {
						value: '选项5',
						label: '北京烤鸭'
					}]
				}
			}
		},
		data() {
			return {
				showOptions: false,
				boundingClientRect: {},
				currentSelect: {},
				optionsGroupTop: 'auto',
				optionsGroupMargin: ''
			}
		},
		computed: {
			showSuffix() {
				return this.showOptions ? 'showOptions' : 'no-showOptions'
			},
			easySelectSize() {
				let size = this.size.toLowerCase()
				if (size in SIZE) {
					return {
						width: SIZE[size].width,
						height: SIZE[size].height
					}
				} else {
					return {}
				}
			}
		},
		mounted() {
			const elQuery = uni.createSelectorQuery().in(this)
			elQuery.select('.easy-select').boundingClientRect(data => {
				this.boundingClientRect = data
			}).exec();
			try {
				if (!this.windowHeight) {
					const storageHeihgt = uni.getStorageSync(STORAGE_KEY)
					if (storageHeihgt) {
						this.easyWindowHeight = storageHeihgt
						return
					}
					const res = uni.getSystemInfoSync();
					this.easyWindowHeight = res.windowHeight
					uni.setStorageSync(STORAGE_KEY, this.easyWindowHeight)
				}
			} catch (e) {
			    // error
			}
		},
		methods: {
			trigger(e) {
				const view = uni.createSelectorQuery().in(this)
				view.select('.easy-select').fields({rect: true}, data => {
					let {	top, bottom } = data
					const thresholdHeight = Math.min(MAX_OPTIONS_HEIGHT + OPTIONS_MARGIN, (this.options.length * OPTIONS_ITEM_HEIGHT) +
						OPTIONS_OTHER_HEIGHT)
					bottom = Number(this.windowHeight || this.easyWindowHeight) - (top + this.boundingClientRect.height) // 距离底部的距离等于视口的高度减上top加select组件的高度

					// judge direction
					if (bottom < thresholdHeight) {
						this.optionsGroupDirection = 'up'
						this.optionsGroupTop = -thresholdHeight - 12 + 'px'
						this.optionsGroupMargin = '0'
					} else {
						this.optionsGroupDirection = 'down'
						this.optionsGroupTop = 'auto'
						this.optionsGroupMargin = '10px 0 0 0'
					}

					// if (this.scrollTop < )
					this.showOptions = !this.showOptions
				}).exec();
			},
			select(options) {
				this.showOptions = false
				this.currentSelect = options
				this.$emit('selectOne', options)
			},
			hideOptions() {
				this.showOptions = false
			}
		}
	}



	.easy-select {
		position: relative;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		/* font-size: 28rpx; */
		color: #606266;
		outline: none;
		box-sizing: content-box;
		height: 30px;
	}

	.easy-select input {
		padding: 0 18rpx;
		padding-right: 60rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 100% !important;
		min-height: 100% !important;
	}

	.easy-select .easy-select-suffix {
		position: absolute;
		box-sizing: border-box;
		height: 100%;
		right: 5px;
		top: 0;
		display: flex;
		align-items: center;
		transform: rotate(180deg);
		transition: all .3s;
		transform-origin: center;
	}

	.easy-select .showOptions {
		transform: rotate(0) !important;
	}

	.easy-select .no-showOptions {
		transform: rotate(180deg) !important;
	}

	.easy-select .easy-select-options {
		position: absolute;
		padding: 6px 0;
		margin-top: 10px;
		border: 1px solid #e4e7ed;
		border-radius: 4px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		box-sizing: border-box;
		transform-origin: center top;
		z-index: 2238;
		overflow: scroll;
		max-height: 274rpx;
	}

	.easy-select .easy-select-options-item {
		padding: 0 20rpx;
		position: relative;
		white-space: nowrap;
		font-size: 14px;
		color: #606266;
		height: 33px;
		line-height: 33px;
		box-sizing: border-box;
	}

	.easy-select .active {
		background-color: #F5F7FA
	}

2.1页面引用

import EasySelect from "../../node_modules/components/easy-select/easy-select.vue"

						
							
						
					



//方法
selectOneb(options) {
				console.log("options部门", options)
				
				this.form.maId = options.maId;
				this.selecValueb = options.maName;
			
				
			},
			useOutClickSideb() {
			
				this.$refs.easySelectb.hideOptions && this.$refs.easySelectb.hideOptions()
			},

暂时就这些了，那个大哥更好的方式告知小弟一声

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/7c81b4fbdf.html