前端学习交流QQ群：1群：173683895 ，2群: 173683866  欢迎加入学习交流进步

承接项目开发，需求功能开发，博主微信号：Jay_09168

本文的实现代码是搜索页面，实现了搜索功能，搜索历史，清空搜索历史，搜索出来的列表数据分页等功能，包含完整样式

搜索页面样式：

直接上代码：

<template>
	<view class="page ">
		<view class="p_r">
			<view class="search">
				<image class="search_icon" :src="search_icon"></image>
				<input class="input" type="text" v-model="searchVal" placeholder-class="placeholderInput"
					placeholder="在这里输入" />
			</view>
			<view class="txt" v-if="searchVal" @click="cancel()">
				取消
			</view>
			<view class="txt" @click="search(searchVal)">
				搜索
			</view>
		</view>
		<block v-if="!searchStatus">
			<view class="titleBlock">

				<image class="del" :src="del" @click="clickDel" mode="widthFix"></image>
				<view class="title">
					搜索历史
				</view>
			</view>
			<view class="keyList">
				<view class="keyItem" @click="search(item.name)" v-for="(item,index) in historyList">
					{{item.name}}
				</view>
			</view>
		</block>

		<block v-if="searchStatus">
			<view class="tips">
				共找到{{articleList.length}}个相关内容
			</view>
			<view class="noListBlock" v-if="articleList.length==0">
				<image class="noListImg" :src="noList" mode="widthFix"></image>
				<view class="">
					没有找到相关的信息
				</view>
				<view class="">
					请换一个关键词试试吧
				</view>
			</view>
			<view class="list" v-if="articleList.length>0">
				<view class="listItem" @click="nav_articleDetail(item.id)" v-for="(item,index) in articleList"
					:key="index">
					<view class="p_r">
						<view class="titleAndDate">
							<view class="listTitle">
								{{item.title}}
							</view>
							<view class="date">
								{{item.publishDate}}
							</view>
							<view class="p_r">
								<view class="zhiding" :style="{backgroundColor:itemm.columnColor}" v-if="item.columnList"
									v-for="(itemm,indexx) in item.columnList" :key="indexx">
									{{itemm.name}}
								</view>
							</view>
						</view>
						<image class="articleImg" :src="item.imageHref" mode="widthFix"></image>
					</view>
					<!-- <image src="../../static/img/yuxian.png" class="yuxian"></image> -->
					<image :src="yuxian" class="yuxian"></image>

				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNo: 1,
				pageSize: 7,
				total:'',
				articleList: [],
				searchStatus: false, //是否已搜索
				// searchStatus: true, //是否已搜索
				noList: this.$config.imageUrl + 'noList2.png',
				del: this.$config.imageUrl + 'del.png',
				a_icon: this.$config.imageUrl + 'a_icon.jpg',
				yuxian: this.$config.imageUrl + 'yuxian.png',
				search_icon: this.$config.imageUrl + 'search_icon.png',
				searchVal: '',
				list: [],
				historyList: [],
			};
		},
		props: ['enter_type'], //是否为搜索页面 true 是 默认不传为false
		watch: {
			searchVal: function() {
				if (this.searchVal) {
					console.log('searchVal', this.searchVal);
				}
			}
		},
		onLoad() {
			this.$common.Init.call(this);
			this.searchList()
		},
		onReachBottom() {
			console.log('触底');
			if(this.articleList.length<this.total){
				this.pageNo +=1;
				this.getArticleList('isReach')
			}
		},
		methods: {
			searchList(){
				this.$request(this.$api.searchList,{},'get').then(res => {
					this.historyList = res.result.records;
				})
			},
			cancel(val) {
				this.searchStatus = false;
				this.list = [];
				this.searchVal = '';
				this.searchList()
			},
			search(val) {
				this.searchVal =val;
				this.searchStatus = true;
				this.getArticleList()
				
			},
			
			getArticleList(isReach){
				var data = {
					searchName:this.searchVal,
					orderTitle:'癌症',
					columnType:'article',
					showColumFlag:true,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}
				this.$request(this.$api.articleList, data,'get').then(res => {
					if(res.code==200){
						let list = res.result.records
						this.total = res.result.total;
						if(isReach){
							this.articleList=this.articleList.concat(list);
						}else{
							this.articleList=list;
						}
					}
				})
			},
			clickDel() {
				this.$request(this.$api.deleteAll, {},'DELETE').then(res => {
					this.historyList = []
				})
			},
			navIndex(e) {
				let url = '/pages/index/index'
				this.goOtherPages(url)
			},
			muneChange() {
				this.$emit('changeMune');
			},
			nav_my(e) {
				let url = '/pages/my/my'
				this.goOtherPages(url)
			},
			nav_articleDetail(id) {
				var url = '/pages/notice/noticeDynamic?id=' + id
				this.goOtherPages(url)
			},
		}
	};
</script>

<style lang="scss">
	.page {
		color: #666;
		font-size: 30rpx;
		margin-top: 10rpx;
		width: 90vw;
		margin-left: 5vw;

		.tips {
			margin-top: 50rpx;
			color: #000;
		}

		.noListBlock {
			position: relative;
			text-align: center;
			top: 200rpx;

			.noListImg {
				width: 260rpx;
				height: 260rpx;
				margin-bottom: 20rpx;
			}
		}

		.list {
			margin-top: 20rpx;

			.listItem {
				position: relative;
				min-height: 130rpx;
			}

			.articleImg {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
				position: absolute;
				right: 0;
				top: 20rpx;
			}

			.titleAndDate {
				height: 164rpx;

				.listTitle {
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #17923B;
					width: 540rpx;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-break: break-all;
				}

				.zhiding {
					letter-spacing: 5rpx;
					border: 1px solid;
					color: #fff;
					font-size: 20rpx;
					padding-left: 10rpx;
					padding-right: 10rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
					text-align: center;
					height: 34rpx;
					line-height: 32rpx;
					margin-top: 10rpx;
				}

				.zhiding0 {
					background-color: #17923B;
				}

				.zhiding1 {
					background-color: #F99401;
				}

				.zhiding2 {
					background-color: #0180E0;
				}
			}

			.date {
				color: #666;
				margin-top: 4rpx;
				font-size: 24rpx;
			}

			.yuxian {
				height: 14rpx;
				margin-bottom: 0rpx;
				width: 100%;
				margin-top: 30rpx;
			}
		}

		.search {
			position: relative;
			width: 574rpx;
			height: 60rpx;
			border-radius: 14rpx;
			background: #FFFFFF;
			border: 2rpx solid #d3d3d3;
			justify-content: center;
			align-items: center;
			display: -webkit-flex;

			.search_icon {
				position: absolute;
				left: 30rpx;
				width: 30rpx;
				height: 28rpx;
			}

			.input {
				width: 80%;
				margin-left: 50rpx;
				font-size: 30rpx;
			}

			.placeholderInput {
				letter-spacing: 5rpx;
				color: #c7c7c7;
				font-size: 30rpx;
			}
		}

		.garbageBlock {

			height: 50rpx;
			line-height: 50rpx;
			background-color: #EFEFEF;
			border-radius: 20rpx;
			margin-bottom: 18rpx;
			margin-right: 14rpx;
			padding: 0 24rpx 0 24rpx;
			position: absolute;
			font-size: 28rpx;
			right: 30rpx;

			.garbage {
				width: 28rpx;
				height: 28rpx;
				position: relative;
				top: 2rpx;
				margin-right: 10rpx;
			}
		}

		.keyList {
			margin-top: 32rpx;
			// margin-left: 30rpx;
			display: flex;
			flex-wrap: wrap;
			font-size: 26rpx;

			// justify-content: space-around;
			.keyItem {
				height: 50rpx;
				line-height: 50rpx;
				background-color: #F3F3F3;
				border-radius: 6rpx;
				margin-bottom: 18rpx;
				margin-right: 14rpx;
				padding: 0 18rpx 0 18rpx;
			}
		}

		.titleBlock {
			margin-top: 50rpx;
			position: relative;

			.del {
				width: 26rpx;
				position: absolute;
				top: 8rpx;
				right: 10rpx;

			}

			.title {
				width: 120rpx;
				font-weight: 600;
				border-bottom: 2px solid #17923B;
				padding-bottom: 2rpx;
			}
		}

		.txt {
			width: 80rpx;
			text-align: center;
			font-size: 30rpx;
			line-height: 71rpx;
			margin-left: 10rpx;
		}

	}
</style>