【若依前后端分离+app】第四篇--uni-app搜索框

已于 2024-03-08 13:51:05 修改
阅读量530 收藏 3
点赞数 3
文章标签： java 前端 服务器
于 2024-03-08 13:44:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63456808/article/details/136556956
版权
本文详细介绍了如何在uni-app应用中使用uni-search-bar组件，包括设置placeholder提示、v-model数据绑定、clearButton和cancelButton功能，以及如何通过blur事件处理用户输入并触发后台GET请求获取数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

全图示例： 

搜索框

示例：

uni-app组件uni-search-bar使用：

<!-- 三个搜索框 -->
		<uni-search-bar @blur="oneBlur" :focus="true" v-model="SelectOptions.one" placeholder="请输入字段一"
			clearButton="auto" cancelButton="none">
		</uni-search-bar>
		<uni-search-bar @blur="twoBlur" :focus="true" v-model="SelectOptions.two" placeholder="请输入字段二" learButton="auto"
			cancelButton="none">
		</uni-search-bar>
		<uni-search-bar @blur="threeBlur" :focus="true"
最低0.47元/天 解锁文章
uni-ui的uni-search-bar 搜索栏代码解析(vue2)
m0_51066449的博客
05-25 4442
目录 1. 标签 1.1 插槽 2. vue配置项 2.1 data 2.2 emits 2.3 props 2.4 watch 2.5 methods 3. 指令 3.1 v-if/v-else 3.2 @click 4. 完整代码 1. 标签 1.1 插槽 在父组件中用如下模板替代对应的(<slot>标签里的内容)插槽内容(通过v-slot与name属性匹配)，如果父组件不提供slot内容，则会使用子组件的默认内容： <templ...
基于JAVA+SpringBoot+Vue+uni-app的前后端分离的微信小程序校友交流平台
znbcj的博客
10-08 2175
开发背景介绍：随着社交媒体的普及和移动互联网的快速发展，校友之间的交流和联系变得越来越便捷。然而，传统的社交平台往往缺乏专注于校友之间交流的特点，无法提供更加个性化和专业化的功能。因此，我们基于JAVA+SpringBoot+Vue+uni-app技术栈，开发了一款面向微信小程序的校友交流平台。该平台旨在为校友们提供一个便捷、高效、安全的交流平台，促进校友之间的互动和合作。微信小程序端：通过微信小程序作为客户端，提供了便捷的登录和使用体验，用户可以通过微信账号直接登录平台。
uniapp组件-uni-search-bar搜索栏
热门推荐
03-01 2万+
官方示例：https://ext.dcloud.net.cn/plugin?id=866 例1 -基础用法 <template> <view> <view> <uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @input="input" @cancel="cancel" @change="change" @clear="clea.
若依uniapp版本 接入腾讯地图在小程序端展示
克里斯蒂亚诺更新的博客
02-11 271
git地址：（GITEE）若依的uniapp版本。
uniapp uni-search-bar组件使用及自定义图标设定
黎小小的博客
05-30 3684
uniapp 使用自定义icon图标__Jyann_的博客-CSDN博客如果要改变图标样式直接改变uni-searchbar__box即可：如将图标靠左显示// icon图标靠左。
打造高效搜索体验：Uni App 搜索框开发全解析
m0_57836225的博客
01-31 941
设置圆角：根据官方文档，通过radius属性可设置圆角。在组件上添加radius属性绑定，如（数值可按需调整），即可改变搜索框的圆角效果。</view>隐藏取消按钮：项目中默认的搜索框激活时右侧有取消按钮，若不需要，可根据官方文档中的属性进行设置。其可选值有always（一直显示）、auto（根据需求显示）、none（一直不显示）。我们将其设置为none来隐藏取消按钮。</view>修改背景颜色：要把搜索框默认的白色背景改成红色，需修改组件源代码。在components目录下的。
uni-search-bar简单搜索效果
Mr. Ding的小博客
06-18 3488
预期思路：input框内容变化，调用@input方法 拿到输入框的值发送到后端，接收到后端的数据，再利用this保存，但是input方法里没有this指向 uni-search-app组件很不错，样式好看，功能齐全，但是事件里面没有this指向，百度了也没有什么发现，后来想到一个一个办法，利用watch监听。 vue vue2–watch 时间不够 贴个代码 <template> <view class="margin-top"> <uni-search-bar @
基于TP6+Uni-app框架的婚恋系统定制开发环境部署与域名授权优势
最新发布
03-03
其中，TP6+Uni-app框架的婚恋系统定制开发环境部署与域名授权优势成为了开发者关注的焦点。 TP6指的是ThinkPHP 6，这是一个基于PHP语言开发的全栈框架，具有灵活的路由、模型、视图和控制器设计，以及强大的扩展性...
uniapp框架-美食搜索小程序-uni-app项目源码-vue语法格式.zip
05-21
UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和时间。它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和...
uniapp框架-uniapp选择器,包含一级,二级级联,三级级联uni-app项目源码-vue语法格式.zip
05-21
UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和时间。它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和...
uni-app自定义搜索框-自定义按钮及搜索图标
Sun_lightYY的博客
02-18 8843
效果图： 布局代码： <!-- 搜索框 --> <view class="search-bar"> <view class="search-bar-box"> <image class="search-span" src="../../static/image/searchSpan.png"/> <input type="text" value="" placeholder="请输入搜索内容" class="search-tex
uni-app商城（五）搜索框
R·ZORO的博客
05-27 2256
- 输入事件的函数，防抖处理，防止请求过多次搜索 - 对搜索历史数据持久化本地存储 - 点击关键字跳转详情页 - 保存搜索关键词
带你用uniapp从零开发一个仿小米商场_8. 配置pages.json从而实现头部搜索框
JiuMeilove的博客
11-26 7108
app-plus是配置编译到 App 平台时的特定样式，部分常用配置 H5 平台也支持。通过观察小米商城的头部导航栏的时候可以发现,它是由一个文字图标,和一个输入框,还有一个扫描二维码的按钮。这里使用官方的,实现去到pages.json文件,找到index这个页面配置。有两种实现方式,一种是自己写一个自定义导航,还有一种是用官方的。需要注意的就是,图标需要加上\u作为前缀,否则不显示。图标因为前几章讲了如何获取,这里就不赘述了,它拥有这么多的配置项,这里仅仅介绍使用到的。首先配置一下搜索框,
【小程序项目开发-- 京东商城】uni-app之自定义搜索组件（中）-- 搜索建议
计算机魔术师的blog
07-02 7247
使用uni-app官方搜索组件可快速搭建 输入框 通过官方组件提供的搜索组件以及自定义结构如下 效果： 设置背景方法二（在官方组件内设置） 在找到官方组件 效果（一样） 二、 input事件处理 在input组件中，输入的值都在对该函数所传的参数中（不是e.value，官方将input事件绑定事件结构为value值） 三、搜索框自动获取焦点 实现在用户点击搜索框 跳转到搜索页面时，搜索框自动获取焦点（可输入）可以看到，每次输入键入一次数据都会触发一次input请求，我们设置在五百毫秒内用户......
uniapp组件uni-search-bar实时搜索内容
m0_60870417的博客
03-01 1058
uni-search-bar实时搜索内容
打造高效搜索体验：UniApp 搜索框功能实现全解析
m0_57836225的博客
01-31 1055
在开发 UniApp 应用时，搜索功能是提升用户体验的关键一环。本文将详细介绍如何一步步实现搜索页面的基本结构渲染、搜索框自动获取焦点、防抖处理等功能，并附上完整代码示例，帮助开发者快速上手。
在uniapp封装搜索组件
qq_46159864的博客
05-08 2038
项目中很多时候都会用到共同的组件部分,当遇到这些公共的部分的时候,首先想到的就是封装.接下来,就聊一聊组件的封装,在这里以**搜索框**为例.基本上每个项目都会用到这个部分 实现效果如下: 搭建结构 从实现的效果来看,并没有那么多新知识,更多的话可能就是一些样式的实现:话不多说开始敲代码.首先我们在项目中先搭建好结构 搜索框的简单搭建 代码如下: <template lang="wxml"> <view class="history"> <view class="
uniapp顶部导航栏实现自定义功能按钮+搜索框并监听响应事件
逆水行舟 不进则退
06-18 4759
uniapp开发手机端实现原生顶部导航栏自定义功能按钮+搜索框并监听响应事件
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值