小程序实现下拉刷新功能-ag九游会j9官方网站

ag九游会j9官方网站-j9九游会登录入口首页新版
ag九游会j9官方网站-j9九游会登录入口首页新版apij9九游会登录入口首页新版的解决方案学堂社区
控制台注册
2
小程序实现下拉刷新功能
浩
2023-06-27
134 浏览
江海入海，知识涌动，这是我参与江海计划的第14篇。

如图所示，在页面顶端下拉，就会自动刷新页面，本节将实现这个功能。
1687858082151.png

事实上，小程序本身已经提供了实现下拉更新的api。
在文档树中打开pages/douban/index.js文件，添加一个onpulldownrefresh方法，代码如下：
onpulldownrefresh () {
   this.retrievedata().then(() => wx.stoppulldown-refresh())
}
在这里使用箭头函数定义then方法需要的匿名函数，没有使用花括号{}将函数体括起来，是因为代码只有一行，省略了。
这里也体现了使用promise编程的好处，因为retrievedata函数返回的是一个promise对象，所以对它可以进行then调用。
在onload方法中，调用retrievedata之后就不需要再调用wx.stoppulldownrefresh方法
了，只有在onpulldownrefresh函数中才需要。onpulldownrefresh是小程序规定的下拉函数，在page中定义它就意味着下拉更新功能实现了一半。
在文档树中打开pages/douban/index.json文件，json文件是页面的配置文件。在花括号{}里输入“en”，编程器会自动实时提示“enablepulldownrefresh”，按键，设置其值为true。至此，下拉更新的功能已全部完成。思考　当下拉更新时，如何显示一个“加载中”的提示，并在加载完成后自动隐藏提示。

在j9九游会登录入口首页新版首页单击搜索框进入搜索页面，输入要搜索的关键词，单击“搜索”按钮，展示的电影列表如图
1687858147421.png
所示；
在搜索页面，提供即时匹配关键字的功能，如图所示。本文将实现这个功能。

1687858205823.png

在文档树中打开pages/douban/index.wxml文件，在最下面添加如下代码：


这部分wxml标签代码，在j9九游会登录入口首页新版首页定义了一个八分透明的“假”的搜索框，效果如图

1687858257662.png

单击搜索框时，会转到search页面（这个页面目前尚未定义）。
在文档树中打开app.json，使用2.1.3节的快捷方法创建pages/douban/search页面。
打开search.wxml页面，修改wxml标签代码为：

在上述代码中，searchinputfocus控制input组件的焦点，当其为true时，input组件自动聚集。
bindinput用于绑定输入事件，在onsearchinputtype函数中，先将输入的文本从e.detail.value中取出并保存。为了避免在用户注意　settimeout（）只执行一次code。如果要多次调用，请使用setinterval（）或者让code自身再次调用settimeout（）。
对于下面这段代码：

网站地图