当前位置:首页 > 资讯 > 正文

uniapp小程序之配置首页搜索框功能的实现

uniapp小程序之配置首页搜索框功能的实现

本文效果图:

注意:我们介绍一下本次开发使用的是,本次分享内容的搜索框为禁止输入搜索框,点击跳转专属搜索页面。

配置链接:uni-app官网 (dcloud.net.cn)

用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

页面中配置项会覆盖 中相同的配置项.

我们需要配置的是导航栏,所以选择 属性,根据自己的需求去选择即可。

看了上面官网的截图,细心的小伙伴应该发现了,我们所选的app-plus是兼容H5的但是不兼容小程序端,所以我们需要自己手动编写小程序端的内容,详情看下文。

在pages配置项中,找到我们需要配置搜索框的页面位置,添加style配置项。示例代码如下:

写完上面的代码我们可以看一下效果图:

搜索框已经出现在我们首页的顶部,是我们所预期的效果。

搜索框点击事件与按钮点击事件

我们需要的就是上面两个方法 与

示例代码如下:

注意: 方法只有在 中的 配置 为 时才会触发

我们可以在对应的方法内编写相应的操作,例如点击搜索框跳转指定的搜索页。

细心的小伙伴能发现,官方文档中的按钮点击事件按钮是一个数组而不是单个的

那么监听多个按钮的点击事件我们应该怎么去区分我们点击的是哪个按钮呢?

给大家演示一下:

pages.json文件内容配置如下:

index.vue文件监听事件如下:

点击其中一个按钮e输出结果如下,我们可以根据text属性和index属性去区分不同的按钮去完成相应的操作。

APP 和 H5效果如下:

上文写到的我们配置的是不适配小程序端的,所以我们需要自己去手写一个搜索导航栏。

示例代码中的class类中的类名样式是我已经在全局配置好的,由于篇幅比较长,之后的小程序文章也会经常使用,点击链接跳转下载可查看相对应的样式。

free.css文件下载

示例代码如下:

微信小程序端效果图如下,自定义方法也是比较简单的:

到这里我们的搜索导航栏配置三端完毕啦,期待大家的交流指点

最新文章