请先完成列表数据的分页、触底加载
【微信小程序-原生开发】实用教程14 - 列表的分页加载，触底加载更多（含无更多数据的提醒和显示，自定义组件）
https://blog.csdn.net/weixin_41192489/article/details/129355396
效果预览
核心技术
排序
db.where(condition)
.orderBy('date', 'desc') // 按 date 降序， asc 升序 desc 降序
搜索
通过改变筛选条件实现
字符串完全匹配
如查询当前用户发布的信息，即目标数据的 _openid 与当前登录用户的 _openid 完全相等。
condition = {
_openid: this.data.userInfo._openid
}
字符串模糊匹配
需使用正则表达式，如
condition = {
content: new RegExp(keyWords),
}
查询 content 字段中，包含 keyWords 的数据。
（如效果预览中，通过“肖肖”，查询内容包含“肖肖”二字的数据）
时间范围搜索
如搜索 2023年3月5日 的数据：
- 点击日期，弹出日期选择器
<t-cell data-date="{{item.date}}" bind:tap='dateSearch' wx:if="{{item.date !== dataList[index-1].date}}" title="{{item.date}}" leftIcon="calendar" />
dateSearch(e) {
this.setData({
formData: {
date: e.currentTarget.dataset.date
},
searchType: "dateSearch",
dateVisible: true
});
<!-- 日期选择器 -->
<t-date-time-picker data-prop='date' title="选择日期" visible="{{dateVisible}}" mode="date" defaultValue="{{today}}" value="{{formData.date}}" format="YYYY-MM-DD" bindchange="chooseDate" />
- 选择目标日期，点击确定，触发日期改变，进而触发搜索
// 选择日期
chooseDate(e) {
let value = e.detail.value
this.setData({
date: value,
})
this.init()
},
搜索时，记得初始化，详见代码中的备注
// 初始化
init: function () {
this.setData({
currentPage: 1, // 初始化页码为第1页
dataList: [], // 清空列表数据
noMore: false // 重置无更多数据为 false
})
// 重新加载列表
this.getList()
},
- 日期搜索逻辑的实现
// 数据库的高级查询指令 command
const _ = wx.cloud.database().command
condition = {
// 日期范围搜索
date: _.gte(new Date(date + " 00:00:00")).and(_.lte(new Date(date + " 23:59:59")))
}
复杂搜索
如搜索内容或发布人 中包含指定关键字的数据
// 数据库的高级查询指令 command
const _ = wx.cloud.database().command
let keyWords = this.data.keyWords
if (keyWords) {
condition = _.and([
condition,
_.or([{
content: new RegExp(keyWords),
},
{
publisher: new RegExp(keyWords),
}
])
])
}
- 且的关系用 and
- 或的关系用 or
其他常用查询如下：
progress: _.gt(50) // 大于 gte 大于等于
progress: _.lt(50) // 小于 lte 小于等于
// 等于 -- 可用于匹配非字符串，如对象相等，判断不相等为 neq
stat: _.eq({
publishYear: 2018,
language: 'zh-CN'
}),
// 是否在数组内
progress: _.in([0, 100]),
// 是否不在数组内
progress: _.nin([0, 100]),
// 是否存在指定字段
tags: _.exists(true),
// 是否除以指定除数后得到指定余数，如是否是10的倍数（余数为0）
progress: _.mod(10, 0),
// tags 数组内是否同时包含'cloud'和 'database'
tags: _.all(['cloud', 'database']),
// places 数组字段中至少同时包含一个满足 “area 大于 100 且 age 小于 2”
places: _.elemMatch({
area: _.gt(100),
age: _.lt(2),
}),
// places 数组字段中至少有一个元素的 area 字段大于 100 且 places 数组字段中至少有一个元素的 age 字段小于 2
places: {
area: _.gt(100),
age: _.lt(2),
},
// tags 数组字段长度为 2
tags: _.size(2)
更多查询方法详见官网
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Command.html
代码范例
"t-search": "tdesign-miniprogram/search/search",
<view class="searchBox">
<t-search bind:clear='search' bind:submit='search' model:value="{{keyWords}}" placeholder="想找啥？" action="{{ (keyWords || date)?'取消' :'' }} " bind:action-click="clearSearch" />
</view>
.searchBox {
padding: 30rpx;
}
data 中的变量
// 搜索
searchType: "",
date: '',
keyWords: '',
// 搜索
search() {
this.init()
},
// 清除搜索
clearSearch() {
this.setData({
date: '',
keyWords: '',
searchType: ''
})
this.init()
},
// 初始化
init: function () {
this.setData({
currentPage: 1, // 初始化页码为第1页
dataList: [], // 清空列表数据
noMore: false // 重置无更多数据
})
// 重新加载列表
this.getList()
},
// 访问接口，获取列表
getList: function () {
let that = this
// 查询条件 -- 根据页面变量的变化，重组查询条件
let condition = {}
if (this.data.scan === 'me') {
condition = {
_openid: this.data.userInfo._openid,
type: 1
}
}
let type = this.data.type
if (type) {
condition.type = type
}
let date = this.data.date
if (date) {
condition = {
...condition,
// 日期范围搜索
date: _.gte(new Date(date + " 00:00:00")).and(_.lte(new Date(date + " 23:59:59")))
}
}
let keyWords = this.data.keyWords
if (keyWords) {
condition = _.and([
condition,
_.or([{
content: new RegExp(keyWords),
},
{
publisher: new RegExp(keyWords),
}
])
])
}
wx.showLoading({
title: '加载中',
})
db.where(condition)
.orderBy('date', 'desc') // 按 date 降序， asc 升序 desc 降序
.skip(10 * (this.data.currentPage - 1)).limit(10) // 分页
.get().then(
res => {
if (res.data.length === 0) {
this.setData({
currentPage: this.data.currentPage - 1,
noMore: true
})
wx.showToast({
title: `没有更多数据啦！`,
})
} else {
let data = res.data.map(item => {
item.date = DateToStr(item.date)
return item
})
that.setData({
// 累加已加载数据 concat
dataList: that.data.dataList.concat(data)
})
}
wx.hideLoading()
}
).catch(() => {
wx.hideLoading()
})
},
