在小程序实现内容搜索功能
搜索内容绑定
先看看我们现在点击搜索框后的样子
这里,我们使用了vant的search
组件,其 文档 中介绍了一些列关于这个组件的事件绑定方法。
我们要使用到的是在确定搜索时去触发真正的内容搜索,所以我们为search
组件增加这一事件的绑定如下
接着,我们在搜索事件的响应实现中打印绑定在搜索组件上的值变量,然后进行输入测试。
handleSearch() {
const { searchValue } = this.data
console.log('搜索内容', searchValue)
}
这里需要注意,在开发者工具中,对于输入框这类组件,由于是在电脑端,所以无法唤起类似手机端的输入法界面,所以交互上与手机中使用小程序的真实情况所有差别。
对于这种情况,我们可以使用预览功能在手机端进行调试,手机端打开小程序后可点击右上角的...
调出调试面板来查看控制台的输出。
或者使用开发者工具提供的真机调试
功能,可以在手机预览小程序的同时,在电脑端的开发者工具内实时看到调试信息。
调试
经过调试,我们发现,search
所绑定的value
只会在第一次输入后改变并存储在searchValue
中,而后续再输入的值并不会更新这个变量,这就导致我们不能每次搜索都使用最新输入的内容,这是存在问题的。
数据绑定
解决的方法也很简单,就是使用小程序自带的数据绑定特性,将search
组件中传入的value
属性改为model:value
,从而启用数据双向绑定。
这样,在后续的输入更新后,都会同时更新searchValue
的值,达到同步修改的效果。
条件查询
那么能够拿到每次搜索框输入的内容,我们就可以拿这个作为关键字,对列表内容进行查询。
规则就是从数据库中的所有记录中查找text
中包含我们的搜索关键字的记录,当然最多也只会一次返回20条记录,然后同样可以支持上拉加载。
其实这里和之前查询数据的方式基本一致,只是在原有的基础上增加一个关键字匹配条件,那么让我们来改造一下之前的数据查询方法。
我们将原本用于刷新整个列表内容的方法增加了搜索内容作为参数,并透传给用于真正查询数据的云函数处理方法。同时,在每次搜索框确认搜索时,判断是否有搜索内容,如果有则去进行数据的重新获取。
数据库记录匹配
接着,我们在云函数中对于数据库数据的提取也需做相应的改动,这里会用到数据库记录的正则匹配
方法来进行对搜索内容的匹配,具体可参考 官方文档
改造后的核心逻辑如下
const db = cloud.database()
const collection = db.collection('homeContentList')
let searchPromise
let countPromise
try {
if (content) {
const searchReg = db.RegExp({
regexp: content,
options: 'i'
})
searchPromise = collection.where({
text: searchReg
})
.skip(pageNo).limit(pageSize).get()
countPromise = collection.where({
text: searchReg
})
.count()
} else {
searchPromise = collection.skip(pageNo).limit(pageSize).get()
countPromise = collection.count()
}
const [{ data: listData }, { total }] = await Promise.all([searchPromise, countPromise])
if (listData) {
data = listData
}
totalSize = total
} catch (error) {
console.log('error', error)
}
我们根据是否有搜索内容,来区分是否要在查询数据的过程中进行正则匹配,并且在有搜索内容时忽略搜索内容的字母大小写,以尽可能多的匹配到内容。
搜索结果
这样,我们就实现了对于搜索内容的查询。
内容页面优化
最后,我们优化一下首页的展示效果。
无数据组件
很多页面都有可能是数据列表的形式,而其各自在加载完所有数据后需要展示在底部的“没有更多内容”字样可能不同,所以我们将这部分展示封装成一个可供复用的自定义组件。
试图部分
<view class="wrap">
<text class="text">{{text}}</text>
</view>
组件样式
.wrap {
width: 100%;
padding: 20rpx 0 40rpx;
text-align: center;
}
.text {
color: #999;
font-size: 26rpx;
line-height: 30rpx;
}
组件参数
Component({
properties: {
text: {
type: String,
value: '没有更多内容了'
}
}
})
展示效果
总结
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfibee
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01