搜索界面的理解
搜索界面的理解
界面基本概况
<template>
:模板标签,用于定义组件的模板内容。<view class="b-container">
:根视图容器,具有类名b-container
。<view class="uni-search-box">
:搜索栏容器。<uni-search-bar>
:使用uni-search-bar
组件创建搜索栏。 -@confirm="search"
:当搜索确认时触发search
方法。 -v-model="searchTxt"
:将搜索文本与searchTxt
数据属性进行双向绑定。 -radius="100"
:设置搜索栏的圆角半径为 100。 -cancelButton="none"
:隐藏取消按钮。 -disabled
:禁用搜索栏。 -placeholder="请输入搜索内容"
:设置搜索栏的占位符文本。<template v-slot:searchIcon>
:自定义搜索图标插槽。<uni-icons slot="searchIcon" type="search" color="#00cc77" size="18"></uni-icons>
:在搜索图标插槽中插入一个uni-icons
组件,类型为search
,颜色为#00cc77
,大小为 18。<scroll-view>
:滚动视图组件,用于显示账单列表。 -class="statement-item"
:设置滚动视图的类名。 -:style="{ height: scrollHeight + 'px' }"
:根据scrollHeight
数据属性设置滚动视图的高度。 -scroll-y="true"
:启用垂直滚动。 -lower-threshold="50"
:设置滚动到底部的阈值为 50。 -@scrolltolower="onLowerBottom"
:当滚动到底部时触发onLowerBottom
方法。<mb-b-day-group :groups="indexBills" />
:使用mb-b-day-group
组件显示账单分组。<uni-load-more status="no-more" v-if="indexBills.length>0"></uni-load-more>
:根据账单数量显示加载更多组件。
uni-search-bar的使用
[uni-app官网 (dcloud.net.cn)
“uni-app官网 (dcloud.net.cn)”)
v-model
v-model 是 Vue.js 中的一个指令,用于实现表单元素(如输入框、复选框等)与组件数据的双向绑定。在这个例子中,
searchTxt 是组件的一个数据属性,它将与搜索栏的输入值进行双向绑定。 当用户在搜索栏中输入内容时,
searchTxt的值会自动更新为用户输入的内容。同时,当
searchTxt的值发生变化时,搜索栏的显示内容也会相应地更新。 这样,通过
v-model的双向绑定机制,搜索内容被定义在组件的
searchTxt` 数据属性中,并且可以在组件的其他部分使用或处理这个搜索内容。
search函数
const search = () => {
// 显示一个不带图标的Toast提示,内容为“搜索:”加上searchTxt变量的值
uni.showToast({
title: '搜索:' + searchTxt.value,
icon: 'none'
})
// 这一行被注释掉了,如果取消注释,它会尝试打印indexPage的page属性和indexStat的value.count属性
// 但由于indexPage和indexStat可能不是对象或未定义,这行代码可能会引发错误
// console.log(indexPage.page , indexStat.value.count);
// 检查loading变量,如果为true,则函数直接返回,不执行后续操作
// 这通常用于防止在搜索结果还在加载时重复触发搜索
if (loading) return;
// 将loading变量设置为true,表示搜索操作已经开始
loading = true;
// 调用bill对象的getSearchBills方法,传入搜索关键词、页码和初始化标志
// 然后返回一个Promise对象,该对象在搜索完成时解析为结果res
return bill.getSearchBills({
keyword: searchTxt.value, // 搜索关键词,从searchTxt变量中获取
page: indexPage, // 页码,从indexPage变量中获取
isInit: true, // 初始化标志,可能用于控制搜索的某些初始化行为
}).then((res) => {
// 当Promise解析时,执行这个回调函数
// 将搜索结果赋值给indexTotal变量
// 注意:这里假设indexTotal是一个普通的变量,而不是响应式变量
// 如果是在Vue中,并且indexTotal是响应式的,应该使用indexTotal.value = res;
indexTotal = res;
})
.finally(() => {
// 无论Promise是成功还是失败,都会执行这个回调函数
// 将loading变量设置为false,表示搜索操作已经完成
loading = false;
});
}
searchTxt
- 创建
:
const searchTxt = ref('')
这行代码创建了一个响应式引用searchTxt
,并初始化为空字符串''
。这意味着searchTxt
的值是一个响应式的,Vue 会追踪它的变化,并在其值改变时自动更新依赖于它的 DOM 或其他计算属性。 - 用途
:在这个组件中,
searchTxt
被用作搜索功能的输入值。用户可以在某个搜索输入框中输入文本,这个文本的值会被绑定到searchTxt.value
上。当用户触发搜索操作(可能是通过点击一个按钮或按下回车键)时,search
函数会被调用,并使用searchTxt.value
作为搜索关键词。 - 响应性
:由于
searchTxt
是响应式的,所以当用户在搜索输入框中输入文本时,searchTxt.value
的值会自动更新。这意味着,如果组件中有任何依赖于searchTxt.value
的逻辑(比如计算属性、侦听器或模板中的表达式),它们也会自动更新以反映新的搜索文本。 - 搜索功能
:在
search
函数中,searchTxt.value
被用作搜索关键词,传递给bill.getSearchBills
方法。这个方法可能是用来从后端 API 获取与搜索关键词匹配的账单列表的。search
函数还处理了一些加载状态(通过loading
变量),以确保在搜索过程中不会重复触发请求。 - 模板绑定
:虽然
<script setup>
片段中没有直接显示模板代码,但可以合理推测,在某个地方(可能是<template>
部分),会有一个输入框(如<input>
或<textarea>
),它的v-model
被绑定到了searchTxt
上。这样,用户输入的文本就会自动更新searchTxt.value
的值。
bill.getSearchBills
// 定义一个名为 getSearchBills 的函数,它接受一个对象作为参数,该对象包含 keyword, page, 和 isInit 属性
getSearchBills({ keyword, page, isInit }) {
// 调用 api.searchBills 函数,传入一个对象作为参数,该对象包含 keyword 和(如果取消注释)page 的展开值
// 注意:api.searchBills 应该返回一个 Promise,它将在未来某个时间点解析为搜索结果
return api.searchBills({
keyword, // 使用 ES6 的对象解构赋值来直接传递 keyword 参数
// 取消注释以传递分页信息(如果 API 支持)。这里使用展开语法(...)来传递 page 对象中的所有属性
...page,
}).then((res) => {
// 当 api.searchBills 的 Promise 解析时,.then() 方法中的回调函数将被调用,res 参数是解析后的结果
if (res.data.code === 0) {
// 检查响应中的 code 属性是否为 0,通常表示请求成功
if (isInit) {
// 如果 isInit 为真,则调用 add_index_bills 函数,传入 this(当前上下文),一个空数组作为账单项,以及 true 表示是初始加载
// 假设 add_index_bills 函数能够处理这种情况,可能是用于清空并重置账单列表
add_index_bills(this, [], true);
}
// 从响应中提取总账单数和具体的账单项
let total = res.data.result.total;
let items = res.data.result.items;
// 检查 this.indexBills(可能是当前类的属性,用于存储账单项)的长度
if (this.indexBills.length > 0) {
// 如果已经存在账单项,则调用 add_index_bills,传入账单项并标记为不是初始加载(false)
// 这可能是用于追加新的账单项到现有列表
add_index_bills(this, items, false);
} else {
// 如果 this.indexBills 为空,则也调用 add_index_bills,但这次是以初始加载的方式(true)
// 这可能意味着需要重新设置整个账单列表
add_index_bills(this, items, true);
}
// 返回总账单数,这样调用者就可以知道有多少账单被检索到
return total;
}
// 如果 res.data.code 不等于 0,则抛出一个错误,表示请求失败
throw new Error('Failed to fetch bills');
}).catch((err) => {
// 如果在 Promise 链中的任何地方发生错误(包括在 api.searchBills 的执行中或在其 .then() 回调中),
// .catch() 方法中的回调函数将被调用,err 参数是捕获到的错误
// 这里简单地重新抛出错误,但您也可以在这里添加自定义的错误处理逻辑
throw err;
});
}
后续内容与api及后端相关联