uniapp组件-uni-search-bar搜索栏

最新推荐文章于 2025-04-22 20:58:08 发布

疆~

最新推荐文章于 2025-04-22 20:58:08 发布

阅读量2.9w

点赞数 15

本文链接：https://blog.csdn.net/qq_40323256/article/details/114242380

版权

微信小程序/uniCloud 专栏收录该内容

64 篇文章

订阅专栏

本文介绍uni-app中搜索框组件的基本用法及高级配置，包括自定义样式、图标及控制清除按钮等，并提供多个实例帮助理解。

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

官方示例：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="clear">
			</uni-search-bar>
			当前输入为：{{ searchValue }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '123123'
			}
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		}
	}
</script>

注意：在微信小程序中使用该组件时，@blue和@clear会失效

例2-自定义placeholder

=》

<template>
	<view>
		<view class="example-body">
			<uni-search-bar placeholder="自定义placeholder" cancel-text="cancel" />
			<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE"/>
			<uni-search-bar radius="100" placeholder="自定义圆角" />
		</view>
	</view>
</template>

例三-自定义Icon

=》

<template>
	<view>
			<uni-search-bar placeholder="自定义searchIcon">
				<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
			</uni-search-bar>
			<uni-search-bar placeholder="自定义clearIcon">
				<view slot="clearIcon" style="color: #999999">X</view>
			</uni-search-bar>
	</view>
</template>

例四-控制清除按钮/取消按钮的显示和隐藏

=》

<template>
	<view>
		<uni-search-bar radius="5" placeholder="清除按钮和取消按钮一直显示" clearButton="always" cancelButton="always" />
		<uni-search-bar radius="5" placeholder="清除按钮自动显示隐藏,取消按钮不显示" clearButton="auto" cancelButton="none"/>
		<uni-search-bar radius="100" placeholder="清除按钮和取消按钮一直隐藏" clearButton="none" cancelButton="none"/>
		<uni-search-bar radius="100" placeholder="清除按钮不显示,取消按钮自动显示隐藏" clearButton="none" cancelButton="auto"/>
	</view>
</template>