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

这篇具有很好参考价值的文章主要介绍了使用uni-ui 实现下拉搜索框(uniapp+uni-ui+vue3 开发微信小程序)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：输入框中输入内容-->远端搜索匹配的选项-->展示选项（可点击选择选项）

代码实现

htm:(一个输入框input + list)

<view class="search-select-box" >
	<uni-easyinput 
        v-model="searchCode" 
        placeholder="输入搜索"
		@input="onInput" 
        @change="onInput" 
        class="search-input"
    />
	<uni-list class="Dropdown" v-show="searchCode.length > 0">
		<uni-list-item 
           class="Dropdown-item" 
           v-for="(item,index) in state.codeList" :key="index" 
           clickable 
           @click="onCodeClick(item)"
        >
		    <template v-slot:body>
				{{item.text}}
			</template>
		</uni-list-item>
	</uni-list>
</view>

js:

let isInfoShow = ref(false)
let state = reactive({
	    codeList:[]
	})
let searchCode = ref('')
	// 输入搜索唯一编码
	const onCodeInput = async (val)=>{
		if(searchCode.value.length == 0){
			state.codeList = []
			return
		}
		const params = {
			code: val
		}
//调取后端接口获取 state.codeList
		const { data } = await GetUniqueCodeSearchList(params)
		if (data.success) {
			state.codeList = data.data
		} else {
			state.codeList = []
			uni.showToast({
				title: data.message,
				icon: 'none'
			})
		}
		
	}
// 选定唯一编码添加构件
	const onCodeClick = (item)=>{
		//根据不同业务
        console.log(item,'选定的值') 
		searchCode.value = ''
		state.codeList = []
	}

css文章来源地址https://www.toymoban.com/news/detail-820143.html

.search-select-box{
		position: relative;
		margin-top: 8rpx;
	}
	.Dropdown{
		position: absolute;
		top:78rpx;
		left: 0rpx;
		width:100%;
		height: 300rpx;
		overflow-y: auto;
	}
	.Dropdown-item{
		background-color: rgb(198, 198, 198);
		z-index: 1;
	}

到了这里，关于使用uni-ui 实现下拉搜索框(uniapp+uni-ui+vue3 开发微信小程序)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！