uni-app使用uView的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>