uni-app（搜索页面）

已于 2022-03-18 15:02:39 修改
阅读量6k 收藏 46
点赞数 3
分类专栏： 微信小程序 文章标签： 前端
于 2022-03-17 11:00:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61195495/article/details/123545034
版权
本文详细介绍了如何在uni-app中配置分包以优化性能，特别是针对商品页面。接着，展示了创建搜索页面的过程，包括页面跳转、搜索框布局、搜索事件绑定以及搜索历史的展示。搜索功能在用户输入关键词后，会实时更新搜索列表，并将搜索内容存储为历史记录。同时，还提供了清除搜索历史的功能。最后，文章提供了完整的页面结构和样式代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、配置分包

可以优化性能，分包存放的一般都是商品页之类的子页面

 在pages.json页面配置，和“pages”同级，写以下代码，“pages”的内容会自动生成

"subPackages":[
		{
			"root":"subpkg",
			"pages":[
                。。。
            ]
		}
	]

 

二、搜索页面

在subpkg创建新的页面goods-search

2.1页面跳转：

 在添加一个方法：

            //点击搜索框跳转到搜索页面
			goToSearch:function(){
				uni.navigateTo({
					url:'/subpkg/goods-search/goods-search'
				})
			}

现在点击搜索框可以进行跳转

2.2搜索页面布局

头部搜索框：

页面布局：

<view class="search-container">
			<uni-search-bar @input="input" :radius="20" bgColor="#F7F7F7" cancelButton="none"></uni-search-bar>
		</view>

页面样式：

.search-container{
		width: 100%;
	}

 绑定事件：

<script>
	export default {
		data() {
			return {
				// 初始化定时器为空
				time:null,
				// 用户输入的关键词
				keyword:'',
			};
		},
		methods:{
			//用户输入时可以获取用户输入的内容
			input:function(e){
				//每次使用先清空定时器，优化
				clearTimeout(this.timer);
				this.timer=setTimeout(()=>{
					this.keyword=e
					//获取搜索数据
					this.getSearchContent()
				},500)
				console.log(e)
			},
			
		}
	}
</script>

搜索时：

 页面布局：

<!-- 搜索列表 -->
		<view class="search-list" v-for="(searchItem,searchIndex) in searchList" :key="searchIndex">
			<uni-icons type="search" size="18" color="#C0C0C0"/>
			<view class="search-item" >
				{{searchItem.word}}
			</view>
		</view>

页面样式：

.search-list{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		border-bottom: 1px solid #eee;
		uni-icons{
			margin:0 20rpx;
		}
	}

绑定事件：

<script>
	export default {
		data() {
			return {
				// 初始化定时器为空
				time:null,
				// 用户输入的关键词
				keyword:'',
				//搜索数据的数组初始化
				searchList:[]
			};
		},
		methods:{
			//用户输入时可以获取用户输入的内容
			input:function(e){
				//每次使用先清空定时器，优化
				clearTimeout(this.timer);
				this.timer=setTimeout(()=>{
					this.keyword=e
					//获取搜索数据
					this.getSearchContent()
				},500)
				console.log(e)
			},
			//获取搜索列表的方法
			async getSearchContent(){
				if(this.keyword.length==0){
					this.searchList=[];
					return
				}else{
					const res=await uni.$http.get('/search')
					const {data,status}=res.data;
					if(status!=200){
						alert('获取数据失败')
					}else{
						this.searchList=data
					}
				}
			}
		}
	}
</script>

搜索历史

页面布局：

<!-- 搜索历史 -->
			<view class="history" v-model="his">
				<view class="history-title">
					<text>历史搜索</text>
					<uni-icons type="trash" size="20" color="#C0C0C0" @click="clearHistory"></uni-icons>
				</view>
				<view class="history-content" v-if="historyList.length!=0">
					<view class="history-item" v-for="(historyItem,historyIndex) in historyList" :key="historyIndex">
						{{historyItem}}
					</view>
				</view>
				<view class="history-none" v-else>
					<text>无搜索历史</text>
				</view>
			</view>

页面样式：

.history{
		.history-title{
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			text{
				font-weight: bold;
				font-size: 34rpx;
			}
		}
		.history-content{
			width: 90%;
			margin: 10rpx auto;
			display: flex;
			flex-wrap: wrap;
			.history-item{
				height: 50rpx;
				line-height: 50rpx;
				background-color: #F8F8F8;
				margin-top: 10rpx;
				margin-right: 20rpx;
				padding:0 20rpx;
				border-radius: 20rpx;
			}
		}
		.history-none{
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}

思路解析：

这是没有搜索历史时的界面，在搜索框搜索后数据进行本地缓存，存储到定义的空数组中

点击右边的垃圾桶会变成现在的样子 

 

这是有搜索过的样子，会有之前搜索过的关键词

需要知道如下两点：

1.新搜索的内容展示在前边

2.如果输入重复的内容，只显示一个就好 

 搜索发现

与搜索历史相同

整体代码

<template>
	<view class="search">
		<view class="search-container">
			<uni-search-bar @input="input" :radius="20" bgColor="#F7F7F7" cancelButton="none"></uni-search-bar>
		</view>
		<!-- 搜索列表 -->
		<view v-if="searchList.length!=0">
			<view class="search-list" v-for="(searchItem,searchIndex) in searchList" :key="searchIndex" >
				<uni-icons type="search" size="18" color="#C0C0C0"/>
				<view class="search-item" >
					{{searchItem.word}}
				</view>
			</view>
		</view>
		<view v-else>
			<!-- 搜索历史 -->
			<view class="history" v-model="his">
				<view class="history-title">
					<text>历史搜索</text>
					<uni-icons type="trash" size="20" color="#C0C0C0" @click="clearHistory"></uni-icons>
				</view>
				<view class="history-content" v-if="historyList.length!=0">
					<view class="history-item" v-for="(historyItem,historyIndex) in historyList" :key="historyIndex">
						{{historyItem}}
					</view>
				</view>
				<view class="history-none" v-else>
					<text>无搜索历史</text>
				</view>
			</view>
			<!-- 搜索发现 -->
			<view class="found">
				<view class="found-title">
					<text>搜索发现</text>
					<uni-icons type="" size="20" color="#C0C0C0"></uni-icons>
				</view>
				<view class="found-content">
					<view class="found-item" v-for="(foundItem,foundIndex) in foundList" :key="foundIndex">
						{{foundItem}}
					</view>
				</view>
			</view>
		</view>
		
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				// 初始化定时器为空
				time:null,
				// 用户输入的关键词
				keyword:'',
				//搜索数据的数组初始化
				searchList:[],
				//搜索历史初始化
				historyList:[],
				// 初始化搜索发现列表
				foundList:['零食','平衡车','行李箱','小白鞋','毛绒玩具','连衣裙','充电宝']
			};
		},
		methods:{
			//用户输入时可以获取用户输入的内容
			input:function(e){
				//每次使用先清空定时器，优化
				clearTimeout(this.timer);
				this.timer=setTimeout(()=>{
					this.keyword=e
					//获取搜索数据
					this.getSearchContent()
				},500)
				console.log(e)
			},
			//获取搜索列表的方法
			async getSearchContent(){
				if(this.keyword.length==0){
					this.searchList=[];
					return
				}else{
					const res=await uni.$http.get('/search')
					const {data,status}=res.data;
					if(status!=200){
						alert('获取数据失败')
					}else{
						this.searchList=data
						//把搜索的关键字保存到historyList中
						this.saveHistory()
					}
				}
			},
			// 保存历史记录
			saveHistory(){
				if(this.historyList.indexOf(this.keyword)==-1){
					this.historyList.unshift(this.keyword)
					// 把用户输入的内容保存到历史记录当中
					uni.setStorageSync('kw',JSON.stringify(this.historyList||'[]'))
				}				
			},
			// 清空历史记录
			clearHistory(){
				this.historyList=[]
				uni.setStorageSync('kw','[]')
				if(his.length==0){
					this.his=!this.his
				}
			}
		},
		onLoad() {
			// 从缓存中读取历史记录
			this.historyList=JSON.parse(uni.getStorageSync('kw'))
		}
	}
</script>

<style lang="scss">
*{
	margin: 0;
	padding: 0;
}
.search{
	width: 100%;
	height: 100vh;
	background-color: #FFF;
	.search-container{
		width: 100%;
	}
	.search-list{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		border-bottom: 1px solid #eee;
		uni-icons{
			margin:0 20rpx;
		}
	}
	.history{
		.history-title{
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			text{
				font-weight: bold;
				font-size: 34rpx;
			}
		}
		.history-content{
			width: 90%;
			margin: 10rpx auto;
			display: flex;
			flex-wrap: wrap;
			.history-item{
				height: 50rpx;
				line-height: 50rpx;
				background-color: #F8F8F8;
				margin-top: 10rpx;
				margin-right: 20rpx;
				padding:0 20rpx;
				border-radius: 20rpx;
			}
		}
		.history-none{
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}
	.found{
		margin-top: 50rpx;
		.found-title{
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			text{
				font-weight: bold;
				font-size: 34rpx;
			}
		}
		.found-content{
			width: 90%;
			margin: 10rpx auto;
			display: flex;
			flex-wrap: wrap;
			.found-item{
				height: 50rpx;
				line-height: 50rpx;
				background-color: #F8F8F8;
				margin-top: 10rpx;
				margin-right: 20rpx;
				padding:0 20rpx;
				border-radius: 20rpx;
			}
		}
	}
}

</style>

 最终效果图

 

uniApp搜索页面
m0_60827885的博客
07-11 576
【代码】uniApp搜索页面。
uni-app与uni-app x：跨端开发更上一层楼
yan1915766026的博客
01-13 3565
uni-app 是基于 Vue.js 开发的跨平台应用前端框架，由 DCloud 公司推出。它允许开发者编写一套代码，通过编译器将其转换为适用于不同平台的代码，包括 iOS、Android、H5、小程序（微信、支付宝、百度、头条等）以及快应用等。这意味着，开发者无需为每个平台单独编写代码，大大节省了开发成本与时间。
uniapp实现搜索页面以及搜索功能思路分享
weixin_56150756的博客
11-24 4474
uniapp搜索页面搜索功能思路分享，很完整的一份uniapp搜索功能思绪共享，希望能帮到大家
uniapp列表分类筛选列表数据
最新发布
qq_66017988的博客
03-20 1085
该功能采用uniapp，vue3的语法来设计一个报警页面数据渲染，并根据不同的分类条件展示不同的数据列表。以上就是今天要讲的内容，在实现一个数据渲染和加上条件检索数据列表的时候，首先需要清楚要以那个参数作为判断点，和将数据修改后要将数据及时显示，用的方法为set+方法名，首先要在渲染显示数据那一页声明函数，然后在修改页面中引用。
uni-app 21公共搜索页开发
善假于物
09-19 278
不废话，直接上图 下图是代码 search.nvue <template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="我的收藏" showBack :showRight="false"> <input type="text" value="" placeholder="请输入关键字" style="width: 650rpx;" class="font-md" /.
uniapp---搜索页面的布局搭建及功能完成
前端卷王小白的博客
04-21 1618
uniapp,vue,css布局,html,搜索页的功能
uniapp实现搜索功能详细步骤【前端开发】
2401_84093899的博客
05-06 2011
最后一句是加载用户的头像，这一块是由于阿帕奇服务器会将用户上传的头像转成一个固定格式的url，因此可以用这行代码拼接出头像的url，从而把头像渲染。同样是后端定义的一个变量名，而this.friendName是前端捕获的用户输入在搜索框中的数据，这个数据表示了用户想要搜索的好友的名称。需要注意的一点是，这里的。这种情况下，在回调之后，会将搜索者自己的用户信息渲染出来，但与普通的搜索结果不同的是，此时。这种情况下，在回调之后，会将这个好友的用户信息渲染出来，但与普通的搜索结果不同的是，此时。
基于UNI-APP的仿转转二手市场APP页面模板
02-23
总之，"基于UNI-APP的仿转转二手市场APP页面模板"是一个实用的开发资源，它结合了UNI-APP的跨平台能力和转转APP的成功设计经验，为开发者提供了构建二手市场应用的便捷途径。通过学习和利用这个模板，开发者可以更快...
weather-uni-app
03-10
- 页面路由管理，uni-app 提供的路由 API 如 `uni.navigateTo`、`uni.switchTab` 等。 - 响应式设计和适配不同平台的策略。 - 如何调试和发布 uni-app 项目到不同平台，如微信开发者工具的使用。 通过深入研究 ...
6.1 搜索页导航栏修改｜uni-app 项目实战（搜索页功能模块）｜uni-app & uniCloud 从零入门开发《IT技术资讯类跨端应用》项目实战
08-31
6.1_搜索页导航栏修改｜uni-app_项目实战（搜索页功能模块）｜uni-app_&_uniCloud_从零入门开发《IT技
uni-app新大陆PDA扫描盘点RFID小示例
01-28
如果是源代码，它可能包含uni-app的项目结构，如pages（页面）、components（组件）、static（静态资源）、uni_modules（uni-app插件）等目录。如果是APK，那么它包含了编译打包后的应用，可以通过反编译工具查看其...
uni-app:搜索
薛定谔的猫
03-11 1485
搜索
uni-app搜索页面相关的需求
qq_43601848的博客
03-22 1094
uni-app搜索页面的相关需求和处理
uniapp搜索（历史搜索、热门搜索）
mengmeng12138的博客
07-26 468
【代码】uniapp搜索（历史搜索、热门搜索）
uni-app商城中的搜索功能
Tianxiaoxixi的博客
02-02 4204
uni-app商城中的搜索功能
## 搜索页面 uniAPP vue.js
造价小窝的博客
12-21 285
搜索页面 uniAPP vue.js 知识点一：（页面生命周期) 1 2 onNavigationBarButtonTap 监听原生标题栏按钮点击事件 onBackPress 监听页面返回 onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件 onNavigationBarSearchInputConfirme...
UNIAPP&schema2code生成的列表页面中的搜索功能
sj21521的博客
05-14 532
需要显示的数据命名成了text,这样是为了使在生成的页面中,可以为uni-data-picker(内部数据格式应该也是value 和text) 填充数据.如图问题就在这里,如果你想使用搜索功能,这时在前面配置的搜索字段就因为这个原因不工作了.我们要搜索的是副表的username,但是username as text, 它改名了，不叫username了,所以 不工作了......由改为文档里没有说到~~~弄我一天. ...
uniapp快查页面链接
思维小刀
01-04 151
应用生命周期 uni-app支持 onLaunch、onShow、onHide 等应用生命周期函数，详情请参考应用生命周期 页面生命周期 uni-app支持 onLoad、onShow、onReady 等生命周期函数，详情请参考页面生命周期
【uni-app】实现搜索框、历史记录等详细操作
foreverKOOKV95的博客
12-11 1473
uniapp通过两种外部数据源（api接口、json文件）和本地数据实现搜索框、历史记录详细操作。
仿造One每日一文的uni-app实现指南
**uni-app 页面结构**：在uni-app 项目中，一个页面通常由四个基本文件组成：一个`.vue`的页面组件文件，`.js`的脚本文件，`.css`或`.scss`的样式文件以及`.json`的配置文件。开发者可通过这四个文件定义页面的布局...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值