uniapp：手把手写一个模糊搜索

嫣嫣细语

于 2024-07-11 18:26:10 发布

阅读量1k

点赞数 6

分类专栏：前端 javascript 文章标签： uni-app 前端

本文链接：https://blog.youkuaiyun.com/aaa123aaasqw/article/details/140359211

版权

前言：

模糊搜索的功能是很常见的一个功能，但是在写uniapp移动端项目时并没有发现很好用的组件之类的，所以决定自己小小的造一手，其实早在以前写过一个类似的功能并发布在了插件市场，但是回头再看时，感觉不太行。。。故重新整了一个。之后也会发布在插件市场，如果没有bug的话😁；插件地址

思路：当用户在输入框内输入值时，进行请求服务，拿到返回值，若列表长度大于0，展示返回值，否则展示无匹配内容，用户点击选中值，关闭列表展示框，其中还牵扯到了下一页加载的问题

效果图：

话不多说直接放代码：

fuzzy-list / index.vue

<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]"
					cla