小程序实现搜索功能续

我们上一篇利用自定义连接器实现了搜索功能，但测试发现使用数据列表无法做到数据更新。我们还是按照数据绑定的思路重新开发一下。

自定义连接器方法

module.exports = async function (params, context) {
    
    
  const db = context.database
  const _ = db.command
  let result = {
    
    data:[]}
  let total = 0
  if(params.keyword ==""){
    
    
     result =await context.database.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').
  skip(params.pageSize*(params.pageNo-1)).limit(params.pageSize)
  .get();
  total = await context.database.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').count();
  }else{
    
    
  result =await context.database.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').
  skip(params.pageSize*(params.pageNo-1)).limit(params.pageSize)
  .where(_.or([
    {
    
    name:db.RegExp({
    
    
    regexp: params.keyword,
    options: 'i',
  })},
  {
    
    desc:db.RegExp({
    
    
    regexp: params.keyword,
    options: 'i'})}
  ]))
  .get();
  total = await context.database.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').where(_.or([
    {
    
    name:db.RegExp({
    
    
    regexp: params.keyword,
    options: 'i',
  })},
  {
    
    desc:db.RegExp({
    
    
    regexp: params.keyword,
    options: 'i'})}
  ])).count();
  // 在这里返回这个方法的结果，需要与出参定义的结构映射
  }
  return {
    
    
    pageNo:params.pageNo,
    pageSize:params.pageSize,
    total:total.total,
    records: result.data
  };
};

变量定义

自定义连接器做好之后，在变量里需要定义三个变量，分别是pageNo、keyword和productList

组件搭建

变量定义好后，我们往页面中添加一个滚动容器

先往滚动容器里添加一个单行输入组件，修改字段标题为关键字

给单行输入组件设置行为，值改变时赋值给keyword变量

在单行输入组件下，我们增加个普通容器，里边放置一个文本组件

在普通容器上绑定循环展示，绑定我们的productList变量

文本组件的文本内容从循环变量里绑定

目前没有查询出数据来，是因为pageNo初始为0，我们修改一下，设定初始值为1

为了好看一点，我们给文本组件设置高度，并且设置一个边框


因为需要实现一下分页的效果，我们多录入一些数据，将每页显示的条数更改为5

实现分页

组件配置好之后，我们需要考虑如何实现分页的效果。首先是怎么触发分页，因为是在手机上浏览，我们一般是需要触底的时候实现分页的效果。因此需要在滚动容器上增加触底的事件，我们触底时先将pageNo+1


页码+1之后，我们就需要用新的页码再去调用自定义连接器，获取最新的数据

获取数据成功之后，我们再给列表数据productList重新赋值一下，将新获取到的数据追加进来就实现了分页的效果

{
    
    
    ...$page.dataset.state.productList,
    records:$page.dataset.state.prodcutList?.records?.concat(event.detail?.records)
}

测试时候发现触底没法触发事件，原来需要给滚动容器设置一个默认的高度才可以

设置高度后，如果往下拉，分页的数据会追加到原来的集合中

总结

如果使用数据列表容器，设置比较简单，无需编写过多的代码。但是如果使用自定义连接器就不太好使，就得我们自己使用滚动容器实现一下分页的效果，方法比较多，需要多多实践才可以。