微信小程序极简入门（六）--豆瓣电影小程序下拉刷新和搜索功能

本文介绍了如何在微信小程序中实现豆瓣电影的下拉刷新和搜索功能。首先，通过在pages/douban/index.js中添加API实现下拉刷新，然后在index.json中配置相关参数。接着，创建搜索页面pages/douban/search，并在wxml和js文件中实现即时关键字匹配。完成这些步骤后，一个具备实时查询功能的小程序就搭建完毕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们先将 “pages/douban/index”,调为首页，因为我们已经实现了列表页的开发，那么在 pages/douban/index.wxml中的更多已经可以指向列表页了，如图：
这里写图片描述

一.实现下载刷新功能

1.实际上，小程序本身已经提供了下拉更新的API，在目录树打开pages/douban/index.js，添加方法：

  onPullDownRefresh() {
    wx.showLoading({
      title: '加载中',
    })
    this.retrieveData().then(() => {
      wx.stopPullDownRefresh()
      wx.hideLoading()
    })
  },

当retrieveData数据接收完之后，就调用 wx.stopPullDownRefresh()停止刷新，并且 wx.hideLoading()隐藏加载提示。
2.打开pages/douban/index.json文件，修改为：

{"enablePullDownRefresh": true}

就两步就完成了pages/douban/index.wxml页面的刷新功能。

二.实现搜索功能

实现首页单机搜索进入搜索页面，在搜索页面，提供即时匹配关键字的功能。

这里写图片描述

1.在目录树中打开pages/douban/index.wxml，在最下面添加如下代码：

<view class="weui-search-bar" style="position: absolute;top:0;width:100%;opacity: .8;">
  <navigator url="search" class="weui-search-bar__form">
    <view class="weui-search-bar__box">
      <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
      <input type="text" class="weui-search-bar__input" />
    </view>
    <label class="weui-search-bar__label">
      <icon class="weui-icon-search" type="search" size="14"></icon>
      <view class="weui-search-bar__text">搜索</view>
    </label>
  </navigator>
</