微信小程序搜索分页功能实现

1. 概述

随着微信小程序的流行，越来越多的开发者开始涉足其中，但是在开发中总会遇到各种问题，比如说在小程序中如何实现搜索分页功能。下面就来说一下具体的实现方法。

2. 小程序搜索实现

2.1 在小程序中实现搜索

在小程序中，我们通常使用原生的searchBar来实现搜索功能。searchBar是微信小程序提供的内置组件，可以方便地实现搜索框功能。

以下是searchBar的基本配置：

  <view class="search-bar">
    <input class="search-input" placeholder="搜索" bindinput="searchInput" focus="{{focusInput}}"/>
    <view class="search-cancel" hidden="{{!focusInput}}" bindtap="cancelSearch">取消</view>
  </view>

其中，通过bindinput事件实现了实时搜索，focus="{{focusInput}}是配置了聚焦输入框。这里不做太多赘述。

2.2 实现搜索分页功能

实现搜索分页功能需要以下三步：

第一步：通过在搜索框中输入关键词，调用API接口请求相关数据。

  // 发送请求函数
  getListData(page) {
    wx.showLoading({
      title: '拼命加载中...',
    })
    
    wx.request({
      url: 'https://xxxx.com/list',
      data: {
        keyword: this.data.keyword,
        page: page
      },
      success: res => {
        if(res.statusCode === 200){
          const data = res.data;
          const listData = data.result.records;
          const totalPage = data.result.pages;
          // 将获取到的数据保存到data中，同时关闭加载提示
          this.setData({
            listData: [...this.data.listData, ...listData],
            totalPage: totalPage,
            currentPage: page,
            isListDataLoaded: true
          })
          
          wx.hideLoading();
        }
      },
      fail: err => {
        console.log('网络请求失败', err);
        wx.hideLoading();
      }
    })
  }

其中，page和keyword分别表示当前的页码和搜索的关键词，可以通过API接口参数传递获取。

第二步：在页面中展示搜索结果列表。

  <scroll-view scroll-y class="scroll-view-con" style="height:{{height}}rpx">
    <view class="list-con" wx:for="{{listData}}" wx:key="{{index}}">
      <view>{{item.title}}</view>
      <view>{{item.desc}}</view>
      ...
    </view>
    <loading wx:if="{{!isListDataLoaded}}" class="loading-con"></loading>
    <view wx:if="{{currentPage>=totalPage}}" class="no-more-data">没有更多了</view>
  </scroll-view>

其中，使用<span style="color:red">scroll-view</span>展示列表，并使用wx:for指令将数据渲染到页面上。同时，通过使用wx:key指令识别列表中每一项的唯一标识（此处为index）。

第三步：通过上拉刷新来实现搜索数据的分页显示。

  /**
   * 上拉触发分页函数
   */
  onReachBottom() {
    const {isListDataLoaded, totalPage, currentPage} = this.data;
    if (!isListDataLoaded || currentPage >= totalPage) return;
    this.getListData(currentPage + 1);
  }

在小程序中，通过onReachBottom事件可以实现上拉刷新的操作，从而实现列表的分页显示。

3. 总结

本文介绍了小程序中如何实现搜索分页功能。经过以上三步，我们可以很轻松地实现搜索分页效果，提高用户的搜索交互体验。