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

这篇具有很好参考价值的文章主要介绍了关于uniapp 小程序的下拉框搜索选择。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

<template>
	<view class="index">
		<view class="search" v-if="show">
			<scroll-view class="list" scroll-y v-if="list.length > 0" :lower-threshold="10" @scrolltolower="scrolltolower">
				<view
					v-for="item in list"
					:key="item[valueName]"
					class="item"
					:style="[setItemStyle]"
					hover-class="item-hover"
					hover-start-time="0"
					hover-stay-time="100"
					@click="click(item)"
				>
					{{ item[labelName] }}
				</view>
			</scroll-view>
			<!-- <view class="empty" v-else>{{ noData }}</view> -->
		</view>
	</view>
</template>

<script>
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');
		}
	}
};
</script>

<style lang="scss" scoped>
.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;
	}
}
</style>

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是后台数据

	<u-form-item label="收货单位" prop="msName" borderBottom>
						<!-- <view style="text-align: center;"></view> -->
						<view class="content">
							<u-input v-model="form.msTakeName" class="input" type="text" :value="value_sf" placeholder="请输入收货单位" @input="input_sf" />
							<fuzzy-list label-name="msName" value-name="msId" align="center" no-data="暂无匹配内容,请直接输入"
								:show="show_sf" :list="shoufa" :custom-style="{ fontSize: '30rpx' }"
								@scrolltolower="scrolltolower_sf" @select="select_sf"></fuzzy-list>
						</view>
					

					</u-form-item>

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

<template>
	<view class="easy-select" @click.stop="trigger" :style="[easySelectSize]">
		<input type="text" v-model="value" :placeholder="placeholder" disabled clearable>
		<view class="easy-select-suffix" :style="{border: '1px solid rgba(0,0,0,0)'}" :class="[showSuffix]">
			<view class="easy-select-down-tag">^</view>
		</view>
		<view class="easy-select-options" v-if="showOptions" :style="{'min-width': boundingClientRect.width + 'px', top: optionsGroupTop, margin: optionsGroupMargin}">
			<view class="easy-select-options-item" v-for="item in options" :key="item[valueName]" @click.stop="select(item)" :class="{active: currentSelect.label === item.label}">
				<text>{{item[labelName]}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 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
			}
		}
	}
</script>

<style scoped>
	.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
	}
</style>

2.1页面引用

import EasySelect from "../../node_modules/components/easy-select/easy-select.vue"
<u-form-item label="选择部门" prop="mbName" borderBottom>
						<view class="content" @click="useOutClickSideb">
							<easy-select ref="easySelectb" label-name="maName" value-name="maId" size="medium"
								:value="selecValueb" @selectOne="selectOneb" :options="department"></easy-select>
						</view>
					</u-form-item>



//方法
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://www.toymoban.com/news/detail-719065.html

到了这里,关于关于uniapp 小程序的下拉框搜索选择的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用uni-ui 实现下拉搜索框(uniapp+uni-ui+vue3 开发微信小程序)

    需求:输入框中输入内容--远端搜索匹配的选项--展示选项(可点击选择选项) 代码实现 htm:(一个输入框input + list) js: css

    2024年01月24日
    浏览(55)
  • uniapp实现城市列表选择获取经纬度、附带搜索功能(移动端、微信小程序)

    所用到的技术 腾讯地图微信小程序SDK 高德地图WebServiceAPI服务 APP获取是否授权插件 uview框架(不是必须) 接下来带大家去申请 腾讯地图微信小程序SDK 微信小程序JavaScript SDK 点击下载 JavaScriptSDK v1.2 然后去申请腾讯地图的 key 先创建应用 在添加key 在应用列表中就能看到我们申

    2024年02月11日
    浏览(69)
  • uniapp中下拉选择自定义数据

    生成示例:     view部分 uni-combox部分

    2024年02月14日
    浏览(78)
  • uni-app下拉框 可实现输入下拉框 搜索+选择组合框功能

    插件示例地址

    2024年02月11日
    浏览(56)
  • 【Element】el-select下拉选择器搜索选项,自定义搜索方法,结合后端接口远程搜索

    当我们有多个选项时,我们一般会使用下拉选择器 el-select 展示选项,选项不多的情况下,我们可以进行手动下拉选择。 那当选项有100个,甚至1000个的时候,需要一个个找选项,手动下拉选择就太累了,这时候我们可以利用搜索功能快速查找选项 可以利用搜索功能快速查找

    2024年02月06日
    浏览(44)
  • Python-爬虫、自动化(selenium,动态网页翻页,模拟搜索,下拉列表选择、selenium行为链)

    selenium是一个Web自动化测试工具,可以直接运行在浏览器上·支持所有主流的浏览器.可以根据我们的指令,让浏览器自动加载页面,获取需要的数据,基础页面截图等。 使用pip install selenium命令下载selenium模块。 运行下列代码: 说明没有下载对应浏览器的驱动,这里使用谷歌

    2024年02月01日
    浏览(72)
  • 微信小程序下拉选择

    微信小程序中下拉框选择一般的交互方式有以下两种 直接下拉选择 点击选择框后,弹出浮层进行选择 下边分别介绍两种方式的实现。在微信小程序中,这两种实现都需要修改三个文件 js 文件:下拉选择逻辑的具体实现 wxml 文件:下拉组件引入、定义 wxss 文件:下拉框样式设

    2024年02月16日
    浏览(47)
  • 前端小记--2.element-ui中级联选择器cascader如何默认展开下拉框

    最近做项目时,遇到一个需求:在一个排班表中,展示人员的值班情况,点击单元格,弹出下拉框,修改人员排班信息。 由于下拉框选择内容是树状结构,这里使用了element-ui中级联组件cascader,设置单选模式即可。但是在官方的文档中没找到默认展开下拉框的api,折腾了一番

    2024年02月01日
    浏览(47)
  • uniapp微信小程序 --下拉菜单

    就是原生写这个本来就是一件很简单的事情,但是uniapp里面不支持selct,他封装了东西应该是,插件市场试了好几个也不太行。最后还是找到一个博主的写的很好,记录一下。 这是封装好的需要什么样式自己调整 使用 博主地址附上https://www.cnblogs.com/OrochiZ-/p/15910440.html

    2024年03月26日
    浏览(41)
  • jeecg-boot Vue2前端-下拉搜索框j-search-select-tag

    官网提到了怎么弄,但是很多细节官网还没完善的,我个人作为开发者提供一下代码给你们参考以及使用 以上是效果 现在讲下实现的过程 此处 是jeecg-boot 官网封装好的一个组件,这个组件。 sys_depart,depart_name,id 这个的意思是 去 sys_depart 表里 ,查询的列 depart_name , id = key

    2024年01月17日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包