【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)

简介: 【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)

请先完成列表数据的分页、触底加载

【微信小程序-原生开发】实用教程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日 的数据:

  1. 点击日期,弹出日期选择器

<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" />
  1. 选择目标日期,点击确定,触发日期改变,进而触发搜索
    // 选择日期
    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()
    },
  1. 日期搜索逻辑的实现
// 数据库的高级查询指令 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()
        })
    },

目录
打赏
0
0
0
0
62
分享
相关文章
新手教程:数据库操作(使用PDO或MySQLi扩展)
本文为新手介绍如何使用PDO和MySQLi扩展连接与操作MySQL数据库。PDO更现代灵活,支持多种数据库,适合大多数应用;MySQLi提供面向过程和面向对象两种API,适合直接控制数据库操作。教程涵盖安装配置、创建连接、执行查询(查询、插入、更新、删除)及错误处理等内容。希望这篇教程能帮助你快速上手PHP中的数据库操作!
106 32
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
29 1
谈微信搜索SEO(搜一搜)怎么排名第一
谈微信搜索SEO(搜一搜)怎么排名第一
155 54
达梦数据库DEM监控部署教程分享
达梦数据库DEM监控部署教程分享
271 2
小程序制作教程
小程序制作教程
117 3
小程序制作教程
南大通用GBase 8s数据库onbar基础使用教程
数据备份与恢复是确保数据安全和业务连续性的关键。onbar作为GBase 8s数据库的备份工具,需配合存储管理器使用,通过配置BAR_BSALIB_PATH等参数,实现数据的备份与恢复。本文详细介绍了onbar的配置、备份、恢复及监控流程,帮助数据库管理员构建高效的数据保护方案。
Tengine、Nginx安装MySQL数据库命令教程
本指南详细介绍了在Linux系统上安装与配置MySQL数据库的步骤。首先通过下载并安装MySQL社区版本,接着启动MySQL服务,使用`systemctl start mysqld.service`命令。若启动失败,可尝试使用`sudo /etc/init.d/mysqld start`。利用`systemctl status mysqld.service`检查MySQL的服务状态,确保其处于运行中。通过日志文件获取初始密码,使用该密码登录数据库,并按要求更改初始密码以增强安全性。随后创建一个名为`tengine`的数据库,最后验证数据库创建是否成功以及完成整个设置流程。
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
本文介绍了一款基于Spring Boot和JSP技术的房屋租赁系统,旨在通过自动化和信息化手段提升房屋管理效率,优化租户体验。系统采用JDK 1.8、Maven 3.6、MySQL 8.0、JSP、Layui和Spring Boot 2.0等技术栈,实现了高效的房源管理和便捷的租户服务。通过该系统,房东可以轻松管理房源,租户可以快速找到合适的住所,双方都能享受数字化带来的便利。未来,系统将持续优化升级,提供更多完善的服务。
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
本文介绍了一个基于Spring Boot和Vue.js实现的在线考试系统。随着在线教育的发展,在线考试系统的重要性日益凸显。该系统不仅能提高教学效率,减轻教师负担,还为学生提供了灵活便捷的考试方式。技术栈包括Spring Boot、Vue.js、Element-UI等,支持多种角色登录,具备考试管理、题库管理、成绩查询等功能。系统采用前后端分离架构,具备高性能和扩展性,未来可进一步优化并引入AI技术提升智能化水平。
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
【入门级教程】MySQL:从零开始的数据库之旅
本教程面向零基础用户,采用通俗易懂的语言和丰富的示例,帮助你快速掌握MySQL的基础知识和操作技巧。内容涵盖SQL语言基础(SELECT、INSERT、UPDATE、DELETE等常用语句)、使用索引提高查询效率、存储过程等。适合学生、开发者及数据库爱好者。
110 0
【入门级教程】MySQL:从零开始的数据库之旅

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等