本文效果图:
注意:我们介绍一下本次开发使用的是,本次分享内容的搜索框为禁止输入搜索框,点击跳转专属搜索页面。
配置链接:uni-app官网 (dcloud.net.cn)
用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
页面中配置项会覆盖 中相同的配置项.
我们需要配置的是导航栏,所以选择 属性,根据自己的需求去选择即可。
看了上面官网的截图,细心的小伙伴应该发现了,我们所选的app-plus是兼容H5的但是不兼容小程序端,所以我们需要自己手动编写小程序端的内容,详情看下文。
在pages配置项中,找到我们需要配置搜索框的页面位置,添加style配置项。示例代码如下:
写完上面的代码我们可以看一下效果图:
搜索框已经出现在我们首页的顶部,是我们所预期的效果。
搜索框点击事件与按钮点击事件
我们需要的就是上面两个方法 与
示例代码如下:
注意: 方法只有在 中的 配置 为 时才会触发
我们可以在对应的方法内编写相应的操作,例如点击搜索框跳转指定的搜索页。
细心的小伙伴能发现,官方文档中的按钮点击事件按钮是一个数组而不是单个的
那么监听多个按钮的点击事件我们应该怎么去区分我们点击的是哪个按钮呢?
给大家演示一下:
pages.json文件内容配置如下:
index.vue文件监听事件如下:
点击其中一个按钮e输出结果如下,我们可以根据text属性和index属性去区分不同的按钮去完成相应的操作。
APP 和 H5效果如下:
上文写到的我们配置的是不适配小程序端的,所以我们需要自己去手写一个搜索导航栏。
示例代码中的class类中的类名样式是我已经在全局配置好的,由于篇幅比较长,之后的小程序文章也会经常使用,点击链接跳转下载可查看相对应的样式。
free.css文件下载
示例代码如下:
微信小程序端效果图如下,自定义方法也是比较简单的:
到这里我们的搜索导航栏配置三端完毕啦,期待大家的交流指点
本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕,E-mail:xinmeigg88@163.com
本文链接:http://www.bhha.com.cn/news/5113.html