【微信小程序-原生开发】实用教程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
分享
相关文章
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
28 1
谈微信搜索SEO(搜一搜)怎么排名第一
谈微信搜索SEO(搜一搜)怎么排名第一
152 54
微信小程序原生AI运动(动作)检测识别解决方案
近年来,疫情限制了人们的出行,却推动了“AI运动”概念的兴起。AI运动已在运动锻炼、体育教学、线上主题活动等多个场景中广泛应用,受到互联网用户的欢迎。通过AI技术,用户可以在家中进行有效锻炼,学校也能远程监督学生的体育活动,同时,云上健身活动形式多样,适合单位组织。该方案成本低、易于集成和扩展,已成功应用于微信小程序。
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1616 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
这篇文章详细介绍了如何在Vue.js中使用分页组件展示从数据库查询出来的数据,包括前端Vue页面的表格和分页组件代码,以及后端SpringBoot的控制层和SQL查询语句。
vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
"深度剖析:Oracle SGA大小调整策略——从组件解析到动态优化,打造高效数据库性能"
【8月更文挑战第9天】在Oracle数据库性能优化中,系统全局区(SGA)的大小调整至关重要。SGA作为一组共享内存区域,直接影响数据库处理能力和响应速度。本文通过问答形式介绍SGA调整策略:包括SGA的组成(如数据缓冲区、共享池等),如何根据负载与物理内存确定初始大小,手动调整SGA的方法(如使用`ALTER SYSTEM`命令),以及利用自动内存管理(AMM)特性实现智能调整。调整过程中需注意监控与测试,确保稳定性和性能。
469 2
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。开发者运用Service Worker等实现资源缓存与实时推送,利用Web App Manifest添加快捷方式至桌面,通过CSS3和JavaScript打造流畅动画与手势操作,需注意兼容性与性能优化,为用户创造更佳体验。
153 0

热门文章

最新文章