uniapp封装列表页面头部搜索框

1.定义组件

/components/HeaderSearch/HeaderSearch.vue

<template>
	<view class="HeaderSearch">
		<view class="search-warp">
			<u-search v-model="searchKey" :placeholder="`请输入${placeholder}`" :clearabled="true" :showAction="false"
				@clear="handleSearch" @change="handleSearch"></u-search>
		</view>
	</view>
</template>

<script>
	export default {
		name: "HeaderSearch",
        props:{
			placeholder:String
		},
		data() {
			return {
				searchKey: '',
				timeout: null,
			};
		},
		methods: {
			//获取搜索值
			handleSearch(val) {
				if (this.timeout !== null) clearTimeout(this.timeout)
				this.timeout = setTimeout(() => {
					this.$emit('searchLoadData',val)
				}, 1000);
			},

		},
	}
</script>

<style lang="scss" scoped>
	.HeaderSearch {
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		left: 0;
		width: 100%;
		z-index: 99;
		background-color: #f5f5f5;
		padding-bottom: 10rpx;

		.search-warp {
			background-color: #fff;
			padding: 15rpx 30rpx;
		}
	}
</style>

2.页面引入使用

<template>
	<view class="waitRenewList">
		<HeaderSearch @searchLoadData="searchLoadData" placeholder=""></HeaderSearch>
		<ul>
			<li>1</li>
			<li>1</li>
			<li>1</li>
		</ul>
	</view>
</template>

<script>
	import HeaderSearch from '@/components/HeaderSearch/HeaderSearch'
	export default {
		components: {
			HeaderSearch
		},
		data() {
			return {
				searchKey: '',
			}
		},
		onLoad() {},
		mounted() {},
		methods: {
			searchLoadData(val) {
				this.searchKey = val;
			},
		},

	}
</script>

<style lang="scss" scoped>
	.waitRenewList {
		padding-top: 110rpx;
		ul{
			li{
				height: 300px;
			}
		}
	}
</style>

效果图