uni-app使用uView的search搜索组件踩坑及解决
作者：爱拍照的小码农
在开发H5移动端项目时,使用uView的search搜索组件在iOS系统下显示问题,解决方法是使用uni-app的input输入框,手动添加搜索和清除图标,避免使用confirm-type="search"导致重复图标
场景
在开发后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="focusSearch" focus /> <text class="iconfont icon-igw-f-clean" v-if="searchValue" @tap.stop="clearWords"></text> </view> <view class="cancel-button" @tap="cancel">取消</view> </view> </template>
data() {
return {
searchValue: "",
currentPage: 1,
pageSize: 10,
showRes: false,
};
},
methods: {
clearWords() {
let vm = this;
vm.searchValue = "";
vm.inputChange();
},
inputChange() {
let vm = this;
vm.getNumber();
return new Promise((resolve, reject) => {
vm.$req
.doRequest({
alias: "dcs-search-globalSearch",
query: {
keyword: vm.searchValue,
pageNum: 1,
pageSize: 10,
type: "0",
},
})
.then((res) => {
if (res.code == 0) {
if (vm.$refs.searchKeyword) {
vm.$refs.searchKeyword.searchList = res.data.filter(
(item) => item.title.length > 0
);
}
}
return resolve(res.data);
});
});
},
}<style scoped lang="less">
.input-wrap {
width: 80%;
margin: 42rpx 0 10rpx 28rpx !important;
background: #f7f7f7;
padding-left: 24rpx;
display: flex;
align-items: center;
height: 80rpx;
border-radius: 10rpx;
/deep/ uni-input {
font-size: 28rpx;
width: 446rpx;
}
.icon-sousuo {
font-size: 40rpx;
font-weight: bold;
margin-right: 20rpx;
}
.icon-igw-f-clean {
font-size: 32rpx;
margin-left: 16rpx;
color: #bfbfbf;
}
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。