uni-app之旅-day03-搜索

news2024/10/9 5:10:42

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

  • 5. 搜索
  • 5.0 创建 search 分支
    • 5.1 自定义搜索组件
    • 5.1.2 my-search.vue组件通过自定义属性增强组件的通用性
    • 5.1.3 为自定义组件封装 click 事件
  • 5.2 搜索建议
    • 5.2.1 渲染搜索页面的基本结构
    • 5.2.2 实现搜索框自动获取焦点
    • 5.2.3 实现搜索框的防抖处理
    • 5.2.4 根据关键词查询搜索建议列表
      • 定义如下的 UI 结构
  • 5.3 搜索历史
    • 5.3.1 渲染搜索历史记录的基本结构
    • 5.3.2 实现搜索建议和搜索历史的按需展示
    • 5.3.3 将搜索关键词存入 historyList
    • 5.3.4 解决关键字前后顺序的问题
    • 5.3.5 解决关键词重复的问题和将搜索历史记录持久化存储到本地
    • 5.3.7 清空搜索历史记录
    • 5.3.8 点击搜索历史跳转到商品列表页面
    • 5.4 分支的合并与提交

5. 搜索

提示：以下是本篇文章正文内容，下面案例可供参考

5.0 创建 search 分支

git checkout -b search

5.1 自定义搜索组件

  • 🍔🍔🍔5.1.1 自定义 my-search 组件
  • 在项目根目录的 components 目录上，鼠标右键，选择 新建组件
  • 在分类cate.vue页面的 UI 结构中，直接以标签的形式使用 my-search 自定义组件
<!-- 使用自定义的搜索组件 -->
<my-search></my-search>
<view class="scroll-view-container">
<!-- 左侧滚动视图区域 -->
</view>
  • 定义 my-search 组件的 UI 结构
<view class="my-search-container">
		<!-- 使用 view 组件模拟 input 输入框的样式 -->
		<view class="my-search-box">
			<uni-icon type="search" size="17"></uni-icon>
			<text class="placeholder">搜索</text>
		</view>
	</view>
  • 注意：在当前组件中，我们使用 view 组件模拟 input 输入框的效果；并不会在页面上渲染真正的 input 输入框
.my-search-container{
	background-color: #c00000;
	height: 50px;
	padding: 0 10px;
	display: flex;
	align-items: center;
}
.my-search-box{
	height: 36px;
	background-color: #ffffff;
	border-radius: 15px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	.placeholder{
		font-size: 15px;
		margin-left: 5px;
	}
}
  • 由于自定义的 my-search 组件高度为 50px，因此，需要重新计算cate.vue分类页面窗口的可用高度
onLoad(){
	this.wh = sysInfo.windowHeight - 50;
}

5.1.2 my-search.vue组件通过自定义属性增强组件的通用性

  • 🚜🚜🚜为了增强组件的通用性，我们允许使用者自定义搜索组件的 背景颜色 和 圆角尺寸
  • 通过 props 定义 bgcolor 和 radius 两个属性，并指定值类型和属性默认值：
props:{
	//背景颜色
			bgcolor:{
				type:String,
				default:'#C00000'
			},
			//圆角尺寸
			radius:{
				type:Number,
				default:18
			}
}
  • 通过属性绑定的形式，为 .my-search-container 盒子和 .my-search-box 盒子动态绑定 style 属性
<view class="my-search-container" :style="{'background-color':bgcolor}">
		<!-- 使用 view 组件模拟 input 输入框的样式 -->
		<view class="my-search-box" :style="{'border-radius':radius + 'px'}" @click="searchBoxHandler">
			<uni-icon type="search" size="17"></uni-icon>
			<text class="placeholder">搜索</text>
		</view>
	</view>
  • 移除对应 scss 样式中的 背景颜色 和 圆角尺寸
.my-search-container {
  // 移除背景颜色，改由 props 属性控制
  // background-color: #C00000;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.my-search-box {
  height: 36px;
  background-color: #ffffff;
  // 移除圆角尺寸，改由 props 属性控制
  // border-radius: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .placeholder {
    font-size: 15px;
    margin-left: 5px;
  }
}

5.1.3 为自定义组件封装 click 事件

  • 🌮🌮🌮在 my-search 自定义组件内部，给类名为 .my-search-box 的 view 绑定 click 事件处理函数
<view class="my-search-box" :style="{'border-radius': radius + 'px'}" @click="searchBoxHandler">
  <uni-icons type="search" size="17"></uni-icons>
  <text class="placeholder">搜索</text>
</view>
  • 在 my-search 自定义组件的 methods 节点中，声明事件处理函数
methods:{
	searchBoxHandler(){
		// 触发外界通过 @click 绑定的 click 自定义事件处理函数
		 this.$emit('click')
	}
}
  • 在分类页面中使用 my-search 自定义组件时，即可通过 @click 为其绑定点击事件处理函数
<!-- 使用自定义的搜索组件 -->
<my-search @click="gotoSearch"></my-search>

methods:{
	//跳转到分包中的搜索页面
	gotoSearch(){
		uni.navigateTo({
			url:'/subpkg/search/search'
		})
	}
}

5.2 搜索建议

5.2.1 渲染搜索页面的基本结构

  • 🍕🍕🍕定义如下的 UI 结构
<view class="search-box">
  <!-- 使用 uni-ui 提供的搜索组件 -->
  <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
</view>
  • 修改 components -> uni-search-bar -> uni-search-bar.vue 组件，将默认的白色搜索背景改为 #C00000 的红色背景
.uni-searchbar {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  position: relative;
  padding: 16rpx;
  /* 将默认的 #FFFFFF 改为 #C00000 */
  background-color: #c00000;
}
  • 实现搜索框的吸顶效果
.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}
  • 定义如下的 input 事件处理函数
methods:{
	input(e){
		 //e 是最新搜索内容
		console.log(e)
	}
}

5.2.2 实现搜索框自动获取焦点

  • 🥞🥞🥞修改 components -> uni-search-bar -> uni-search-bar.vue 组件，把 data 数据中的 show 和 showSync 的值，从默认的 false 改为 true 即可
  • 使用手机扫码预览，即可在真机上查看效果

5.2.3 实现搜索框的防抖处理

  • 在search.vue组件 data 中定义防抖的延时器 timer 如下
data() {
  return {
    // 延时器的 timer
    timer: null,
    // 搜索关键词
    kw: ''
  }
}
  • 修改 input 事件处理函数
methods:{
	input(e){
		clearTimeout(this.timer)
		this.timer = setTimeout(()=>{
			this.kw = e;//是搜索的值
			console.log(this.kw) 
		},500) 
	}
}

5.2.4 根据关键词查询搜索建议列表

  • 🍔🥟🍔在 data 中定义如下的数据节点，用来存放搜索建议的列表数据
data(){
	return{
	 // 延时器的 timerId
		timer: null,
	// 存储搜索关键字
		kw:'',
		//存储搜索结果列表
		searchResults:[] 
	}
}
  • 在防抖的 setTimeout 中，调用 getSearchList 方法获取搜索建议列表
this.timer = setTimeout(()=>{
					// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
					this.kw = e
					//根据关键字，查询搜索建议列表
					this.getSearchList()
					console.log(this.kw)
				},500)
  • 在 methods 中定义 getSearchList 方法
//根据关键字，搜索商品建议列表
			async getSearchList() {
				//判断关键字是否为空
				if (this.kw === '') {
					this.searchResults = []
					return
				}
				//获取列表数据，发请求
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/goods/qsearch', {
					query: this.kw
				})
				console.log(res)
				if (res.meta.status !== 200) return uni.$showMsg()
				this.searchResults = res.message;
			}

定义如下的 UI 结构

<!-- 搜索建议列表 -->
		<view class="sugg-list">
			<view class="sugg-item" v-for="(item,i) in searchResults" :key="i" @click="gotoDetail(item.goods_id)">
				<view class="goods-name">
					{{ item.goods_name }}
				</view>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
		</view>
  • 美化搜索建议列表
.sugg-list{
		padding: 0 5px;
		.sugg-item{
			font-size: 12px;
			padding: 13px 0;
			border-bottom: 1px solid #efefef;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.goods-name{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-right: 3px;
			}
		}
	}
  • 点击搜索建议的 Item 项，跳转到商品详情页面
gotoDetail(goods_id){
				uni.navigateTo({
					//指定详情页面的url地址，并传递参数
					url:'/subpkg/goods_detail/goods_detail?goods_id=' + goods_id
				})
			}

5.3 搜索历史

5.3.1 渲染搜索历史记录的基本结构

  • 🍔🍔🍔在 data 中定义搜索历史的初始数据
historyList:['a','app','apple']
  • 渲染搜索历史区域的 UI 结构
<!-- 搜索建议列表 -->
<view></view>
<!-- 历史记录 -->
		<view class="history-box" v-else>
			<!-- 标题区域 -->
			<view class="history-title">
				<text>搜索历史</text>
				<uni-icons type="trash" size="17"></uni-icons>
			</view>
			<!-- 列表区域 -->
			<view class="history-list">
				<uni-tag :text="item" v-for="(item,i) in historyList" :key="i"></uni-tag>
			</view>
		</view>
  • 🥟🥟🥟搜索历史区域的样式
.history-box {
  padding: 0 5px;

  .history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 13px;
    border-bottom: 1px solid #efefef;
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;

    .uni-tag {
      margin-top: 5px;
      margin-right: 5px;
    }
  }
}

5.3.2 实现搜索建议和搜索历史的按需展示

  • 🥞🍕🥞根据搜索结果列表的长度不为 0的时候（searchResults.length !== 0），需要展示搜索建议区域，隐藏搜索历史区域
  • 当搜索结果列表的长度等于 0的时候（searchResults.length === 0），需要隐藏搜索建议区域，展示搜索历史区域
  • 使用 v-if 和 v-else 控制这两个区域的显示和隐藏
<!-- 搜索建议列表 -->
<view class="sugg-list" v-if="searchResults.length !== 0">
  <!-- 省略其它代码... -->
</view>

<!-- 搜索历史 -->
<view class="history-box" v-else>
  <!-- 省略其它代码... -->
</view>

5.3.3 将搜索关键词存入 historyList

methods:{
	async getSearchList(){
		 //省略其它代码... 
		this.saveSearchHistory() 
	},
	saveSearchHistory(){
		this.historyList.push(this.kw) 
	}
},

5.3.4 解决关键字前后顺序的问题

  • 🍔🌮🍔定义一个计算属性 historys，将 historyList 数组 reverse 反转之后，就是此计算属性的值
computed:{
	historys(){
		return [...this.historyList].reverse() 
	}
}
  • 页面中渲染搜索关键词的时候，不再使用 data 中的 historyList，而是使用计算属性 historys
<uni-tag :text="item" v-for="(item,i) in historyList" :key="i"></uni-tag>

5.3.5 解决关键词重复的问题和将搜索历史记录持久化存储到本地

saveSearchHistory(){
	// this.historyList.push(this.kw)
	// 借助Set数据结构去重 转换为Set
	const set = new Set(this.historyList)
	set.delete(this.kw)
	set.add(this.kw)
	this.historyList = Array.from(set)
	//调用uni提供的setStorageSync(key,val) 将搜索历史记录持久化存储到本地
	uni.setStorageSync('kw',JSON.stringify(this.historyList))
}
  • 在 onLoad 生命周期函数中，加载本地存储的搜索历史记录
onLoad(){
	this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
}

5.3.7 清空搜索历史记录

  • 🚜🚜🚜为清空的图标按钮绑定 click 事件
<text>搜索历史</text>
				<uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
  • 在 methods 中定义 cleanHistory 处理函数
//清空搜索记录
cleanHistory(){
	this.historyList = [];
	uni.setStorageSync('kw','[]')
}

5.3.8 点击搜索历史跳转到商品列表页面

  • 🍕🍕🍕为搜索历史的 Item 项绑定 click 事件处理函数
<!-- 列表区域 -->
			<view class="history-list">
				<uni-tag :text="item" v-for="(item,i) in historys" :key="i" @click="gotoGoodsList(item)"></uni-tag>
			</view>
  • 定义 gotoGoodsList 处理函数
//点击搜索历史跳转到商品列表页面
gotoGoodsList(kw){
	uni.navigateTo({
		url:'/subpkg/goods_list/goods_list?query=' + kw 
	})
}

5.4 分支的合并与提交

  • 退回到项目根目录，打开cmd命令窗口

  • 1.将search分支进行本地提交
    – git add .
    – git commit -m ‘’

  • 2.将本地的 search 分支推送到码云
    –git push -u origin search

  • 将本地 search 分支中的代码合并到 master 分支
    –git checkout master
    –git merge search

  • 3.将本地master推送到码云
    –git push

  • 4.删除本地search分支
    –git branch -d search

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2198043.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

设计模式、系统设计 record part04

设计模式、系统设计 record part04

结构型模式 结构型模式分为&#xff1a; 1.类结构型模式 2.对象结构型模式 3。类结构型&#xff0c;使用继承机制&#xff0c;耦合度高&#xff0c;不灵活 4.对象结构型&#xff0c;使用组合、聚合关系&#xff0c;耦合低&#xff0c;灵活 代理模式 1.代理就是中介 2.静态代理&…
阅读更多...
64.DDR3读写控制器的设计与验证（1）（MIG IP核的配置）

64.DDR3读写控制器的设计与验证（1）（MIG IP核的配置）

&#xff08;1&#xff09;DRAM-动态随机存储器&#xff0c;SDRAM-同步动态随机存储器 DDR3 SDRAM- 第三代双倍速率同步动态随机存储器 双倍速率指的是时钟上升沿和下降沿都可以传输数据。同步指的是数据写入或读取时&#xff0c;是按时钟同步的。动态指的是硬件使用电容去存…
阅读更多...
C# 自适应屏幕分辨率

C# 自适应屏幕分辨率

一、新增AutoSizeFormClass.cs class AutoSizeFormClass{//(1).声明结构,只记录窗体和其控件的初始位置和大小。public struct controlRect{public int Left;public int Top;public int Width;public int Height;}//(2).声明 1个对象//注意这里不能使用控件列表记录 List nCtr…
阅读更多...
云手机哪款好用？2024年云手机推荐对比指南

云手机哪款好用？2024年云手机推荐对比指南

随着云手机市场的快速扩展&#xff0c;消费者在选择云手机时面临着众多选择。为了帮助大家找到最适合自己的云手机&#xff0c;小编特意整理了一份当前市场上几款备受关注的云手机品牌对比&#xff0c;大家一起往下看吧。 1. Ogphone云手机 Ogphone云手机是近年来海外业务版块迅…
阅读更多...
图解C#高级教程（五）：枚举器和迭代器

图解C#高级教程（五）：枚举器和迭代器

本章主要介绍 C# 当中枚举器、可枚举类型以及迭代器相关的知识。 文章目录 1. 枚举器和可枚举类型2. IEnumerator 和 IEnumerable 接口2.1 IEnumerator 接口2.2 IEnumerable 接口 3. 泛型枚举接口4. 迭代器4.1 使用迭代器创建枚举器4.2 使用迭代器创建可枚举类4.3 迭代器作为属…
阅读更多...
谈论 MultiPHP

谈论 MultiPHP

许多网站服务器提供商有大量客户&#xff0c;这些客户对他们的在线项目有各种需求。MultiPHP Manager界面可以帮助您轻松管理cPanel账户和域名的PHP和PHP-FPM配置&#xff0c;适用于运行EasyApache 4的系统。MultiPHP Manager界面提供了多种功能&#xff0c;包括&#xff1a; 服…
阅读更多...
软考系统分析师知识点五：数据通信与计算机网络

软考系统分析师知识点五：数据通信与计算机网络

前言 今年报考了11月份的软考高级&#xff1a;系统分析师。 考试时间为&#xff1a;11月9日。 倒计时&#xff1a;32天。 目标&#xff1a;优先应试&#xff0c;其次学习&#xff0c;再次实践。 复习计划第一阶段&#xff1a;扫平基础知识点&#xff0c;仅抽取有用信息&am…
阅读更多...
安卓如何实现双击触摸唤醒点亮屏幕功能-源码分析linage os高通平台

安卓如何实现双击触摸唤醒点亮屏幕功能-源码分析linage os高通平台

背景&#xff1a; 前面文章已经有讲解过双击亮屏在一些方案调研情况&#xff0c;刚好linage os手机本身也有这个功能&#xff0c;刚好也有整体开源源码&#xff0c;所以今天带大家来对双击亮屏的源码部分进行剖析&#xff0c;本篇文章会一直分析到hal操作驱动节点。 设置作为…
阅读更多...
有点晕，inline， crossinline,noinline小计

有点晕，inline， crossinline,noinline小计

inline 主要用于展开铺平函数&#xff0c;用于高频访问但是代码不是很多的方法&#xff0c;减少函数对象的定义 fun <T> List<T>.normalForeach(action:(T)->Unit){for(item in this){action(item)} }inline fun <T> List<T>.inlinedForeach(action…
阅读更多...
易图讯军用VR三维电子沙盘系统

易图讯军用VR三维电子沙盘系统

深圳易图讯军用VR三维电子沙盘系统是一种集成了虚拟现实&#xff08;VR&#xff09;技术、三维建模技术、大数据分析、实时动态更新以及高度安全可靠的综合性军事指挥平台。该系统通过高精度三维模型真实再现战场环境&#xff0c;为指挥员提供沉浸式体验和交互操作的可能性&…
阅读更多...
使用CANFD路由实现CAN与CANFD互通

使用CANFD路由实现CAN与CANFD互通

随着科技的发展&#xff0c;汽车电子和工业领域中CAN通信需要承载数据量也越来越大&#xff0c;传统CAN通信有了向CANFD通信过渡的倾向。在实现过渡的过程中可能会出现自己设备是CAN通信&#xff0c;客户设备是CANFD通信的情况&#xff0c;或者自己设备是CANFD通信&#xff0c;…
阅读更多...
react项目引入ant-design

react项目引入ant-design

当前react版本为&#xff1a; 1、安装antd npm install antd --save不需要安装babel-plugin-import&#xff0c;否则会报各种问题 2、引入Ant Design 样式 为了确保 Ant Design 样式在页面中生效&#xff0c;你需要在 _app.js 文件中全局引入样式。 当前项目用的Next.js。Ne…
阅读更多...
vscode创建flutter项目，运行flutter项目

vscode创建flutter项目，运行flutter项目

打开View&#xff08;查看&#xff09; > Command Palette...&#xff08;命令面板&#xff09;。 可以按下 Ctrl / Cmd Shift P 输入 flutter 选择Flutter: New Project 命令 按下 Enter 。选择Application 选择项目地址 输入项目名称 。按下 Enter 等待项目初始化完成 …
阅读更多...
【HarmonyOS开发笔记 1】 -- 开发环境的搭建

【HarmonyOS开发笔记 1】 -- 开发环境的搭建

DevEco Studio 的下载与安装 下载 下载路径&#xff1a; https://developer.huawei.com/consumer/cn/download/ 安装 解压后双击 deveco-studio-5.0.3.814.exe 指定安装目录&#xff0c;或者默认&#xff0c;然后下一步 一直“下一步”&#xff0c; 直到最后安装完成 新…
阅读更多...
主机加固的关键要素：服务器防病毒

主机加固的关键要素：服务器防病毒

在数字化浪潮中&#xff0c;网络安全已成为企业不可忽视的一环。尤其是安全运维人员&#xff0c;他们肩负着保护企业数据不受侵害的重任。MCK主机加固解决方案&#xff0c;正是为了应对这一挑战而生。 网络安全的严峻现实 不久前&#xff0c;一家知名企业因勒索病毒攻击而被迫…
阅读更多...
MVC、MVP和MVVM之间的区别

MVC、MVP和MVVM之间的区别

MVC&#xff08;Model-View-Controller&#xff09; 角色划分&#xff1a; Model&#xff1a;负责处理数据和业务逻辑&#xff0c;通常包括数据的存储、检索和更新等操作。 View&#xff1a;负责展示用户界面&#xff0c;接收用户输入&#xff0c;并将用户操作传递给 Controll…
阅读更多...
如何在Visual Studio 2019中创建.Net Core WPF工程

如何在Visual Studio 2019中创建.Net Core WPF工程

如何在Visual Studio 2019中创建.Net Core WPF工程 打开Visual Studio 2019&#xff0c;选择Create a new project 选择WPF App(.Net Core) 输入项目名称和位置&#xff0c;单击Create 这样我们就创建好了一个WPF工程 工程文件说明 Dependencies 当前项目所使用的依赖库&…
阅读更多...
java面向对之象类的继承与多态

java面向对之象类的继承与多态

目录 1.类的继承 图解 案例:创建一个动物类和一个猫类 1.代码 1)动物类 2)猫类 3.测试类 2.效果 2.父类方法的重写 案例:如何重写父类的方法 1.代码 1&#xff09;Animal类 2&#xff09;Dog类 3&#xff09;测试类 2.效果 3.super关键字 案例:如何在子类中调用父类的方…
阅读更多...
如何使用 Puppeteer 和 Browserless 运行自动化测试？

如何使用 Puppeteer 和 Browserless 运行自动化测试？

Puppeteer&#xff1a;什么是 Puppeteer 及其功能 Puppeteer 是一个 Node.js 库。使用 Puppeteer&#xff0c;您可以在所有基于 Chromium 的浏览器上测试您的网站&#xff0c;包括 Chrome、Microsoft Edge Chrome 和 Chromium。此外&#xff0c;Puppeteer 可用于网页抓取、自动…
阅读更多...
PDF处理技巧：Windows电脑如何选择合适的 PDF 编辑器

PDF处理技巧：Windows电脑如何选择合适的 PDF 编辑器

您可以阅读本文以了解用于在 PC 上编辑 PDF 的顶级免费软件&#xff0c;而无需花费任何费用即可轻松进行快速编辑、拆分、合并、注释、转换和共享您的 PDF。 PDF 或可移植文档文件是由 Adobe 创建的一种多功能文件格式。它可以帮助您轻松可靠地交换文档&#xff0c;无论相关方…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023