uni-app使用uView的search搜索组件踩坑

最新推荐文章于 2024-09-25 22:25:03 发布

web15208590912

最新推荐文章于 2024-09-25 22:25:03 发布

阅读量2.2k

点赞数

分类专栏：前端 html 面试文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/web15208590912/article/details/123080453

版权

本文介绍了在uni-app使用uView的search组件开发H5移动端项目时，遇到的iOS系统下搜索图标冲突的问题。解决办法是使用uni-app的input输入框并自定义样式，添加搜索和清除图标，避免使用confirm-type='search'属性以防止手机自带搜索图标出现。

摘要由CSDN通过智能技术生成

场景：在开发后H5移动端项目时，使用uView的search搜索组件时遇到这样一个问题，search组件在安卓系统下显示正常，在ios系统下会显示出手机自带的搜索图标，与search组件的图标有冲突，两个图标会同时显示出来

解决：利用uni-app自己的input输入框，自己修改样式，手动加上搜索图标和清除图标，图标是外部引入的阿里图标

【注意】：不要给input输入框加上confirm-type=“search”，否则在ios系统下，还是会出现手机自带的搜索图标，和输入框的图标重复了

具体代码如下：

<template>
	<view style="display: flex; justify-content: space-between">
		<view class="input-wrap" slot="default">
			<text class="iconfont icon-sousuo"></text>
			<input 
				class="uni-input" 
				placeholder-style="color:#999;" 
				placeholder="请输入搜索内容" v-model="searchValue"
				@confirm="searchRes" 
				@input="inputChange" 
				@focus="focusSea