位置: IT常识 - 正文

【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)(微信小程序在哪里找?)

编辑:rootadmin
【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)

目录

前言

App、H5效果

小程序效果

一、兼容APP、H5的方式

二、兼容小程序

三、实现同时兼容


前言

推荐整理分享【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)(微信小程序在哪里找?),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序游戏手游排行榜,微信小程序开发平台,微信小程序怎么制作自己的小程序,微信小程序怎么制作自己的小程序,微信小程序开发一个多少钱,微信小程序开发一个多少钱,微信小程序店铺怎么开,微信小程序怎么制作自己的小程序,内容如对您有帮助,希望把文章链接给更多的朋友!

首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下

App、H5效果

小程序效果

一、兼容APP、H5的方式

在常见titleNView配置代码示例中可以看到基本样式的代码如下

{"pages": [{"path": "pages/index/index", //首页"style": {"app-plus": {"titleNView": false //禁用原生导航栏}}}, {"path": "pages/log/log", //日志页面"style": {"app-plus": {"bounce": "none", //关闭窗口回弹效果"titleNView": {"buttons": [ //原生标题栏按钮配置,{"text": "分享" //原生标题栏增加分享按钮,点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听}],"backButton": { //自定义 backButton"background": "#00FF00"}}}}}, {"path": "pages/detail/detail", //详情页面"style": {"navigationBarTitleText": "详情","app-plus": {"titleNView": {"type": "transparent"//透明渐变导航栏 App-nvue 2.4.4+ 支持}}}}, {"path": "pages/search/search", //搜索页面"style": {"app-plus": {"titleNView": {"type": "transparent",//透明渐变导航栏 App-nvue 2.4.4+ 支持"searchInput": {"backgroundColor": "#fff","borderRadius": "6px", //输入框圆角"placeholder": "请输入搜索内容","disabled": true //disable时点击输入框不置焦,可以跳到新页面搜索}}}}}...]}

我们并不需要所有的内容,本次我将介绍的是,"buttons","searchInput"的组合使用,这里的buttons其实是我的导航栏左右的两个图片,可以配合图标实现想要的功能,searchInput就是中间的搜索框

需要在pages.json中配置,可在button中添加,不过需要注意的是,不管添加文字,矢量图片,默认都是右浮动,可以把其中一个改成左浮动,这里我使用的是阿里巴巴矢量图库的图片,下载文件,引入即可有需要的小伙伴我可以免费提供一个文件夹。

 配置代码如下

"path": "pages/index/index","style": {"navigationBarTitleText": "小余努力搬砖","app-plus": {"titleNView": {"searchInput": {"backgroundColor": "#f4f4f4","borderRadius": "6px", "placeholder": "请输入搜索内容","disabled": true },"buttons": [{"fontSrc": "/static/font/iconfont.ttf",//矢量图片引入路径"float": "left","text": "\ue67a",//引入图片一定要带u"fontSize": "24px",//大小"color": "#666666"},{"float": "right","text":"\ue661","fontSrc": "/static/font/iconfont.ttf","fontSize": "24px","color": "#666666"}]}}}

为了达到跳转的效果,我要在页面同级创建文件夹,为搜索页面,我们要主页使用页面生命周期onNavigationBarSearchInputClicked(此次文件夹需要在pages.json中注册)

【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)(微信小程序在哪里找?)

 来跳转到我们先要的页面

onNavigationBarSearchInputClicked(){uni.navigateTo({url:'../search/search'})}二、兼容小程序

需要与pages同级创建一个components文件夹,在此文件夹下,不需要在用import引入,就可以注册,创建一个如下的插槽子文件夹,带同名目录。在components中的文件都不需要在pages.json注册。(这里实现的主要方式,是通过自己写的样式,来展现出一个搜索框)

<template><view class='slot'><slot name='left'></slot><slot name='center'></slot><slot name='right'></slot></view></template><script>export default {name:"search-slot",data() {return {};}}</script><style scoped>.slot{width: 750rpx;display: flex;}</style>

在首页中引入插槽(不会或者忘记的,可以去学习博主的一学就会的插槽教学),其中的图片都是引入的阿里巴巴矢量图片,图片是我提前准备好的,有想要的小伙伴,私聊我。如下就是我提前准备好的,只要用class就能引入

<search-slot class='flex'><view class="left" slot='left'><text class="iconfont icon-xiaoxi"></text></view><view class="center" slot='center'><text class="iconfont icon-sousuo" @click="search"></text></view><view class="right" slot='right'><text class="iconfont icon-richscan_icon"></text></view></search-slot>

这里也同样需要点击搜索导航跳转到搜索页面(此次文件夹需要在pages.json中注册),是通过@click绑定事件完成的,路径还是同样的方法(创建一个专属的搜索页面)

methods: {search(){uni.navigateTo({url:'../search/search'})}}

css样式代码

<style>.flex {display: flex;height: 88rpx;line-height: 88rpx;align-items: center;}.left {width: 44rpx;flex: 0 0 44px;align-items: center;text-align: center;}.center {flex: 1;height: 60rpx;line-height: 60rpx;background-color: #eee;text-align: center;color: #ccc;}.right {width: 44rpx;flex: 0 0 44px;align-items: center;text-align: center;}</style>三、实现同时兼容

通过以上代码,已经实现了在app、h5、小程序,实现搜索框导航栏,但是如果想要同时满足app、h5、小程序,就需要对此作出一个区域性的判断。

如果没有按兼容性显示,同时配置如上的两个搜索框导航栏,在app、h5就会出现两个搜索框,因为它们兼容小程序的配置

但是小程序只有一个,因为小程序不兼容在 pages.json中配置的搜索框

这时候不用紧张,我们还记得媒体查询吗,这里的方式,和媒体查询几乎是一个意思,在特定的环境使用特定的样式,我们这里通过官网文档可以找到条件编译

使用很简单,只要将代码包裹进条件中即可,我们这里只要将小程序的包裹进,只在微信小程序中编译的条件中即可

#ifdef  MP需条件编译的代码#endif 

代码如下

把配置在首页的小程序的导航栏包裹住(小程序不兼容在 pages.json中的配置,这里就不用在意是否需要条件编译)这样,小程序的搜索框导航不会在app、h5出现了。从而实现了同时兼容的效果。

<!--#ifdef MP --><search-slot class='flex'><view class="left" slot='left'><text class="iconfont icon-xiaoxi"></text></view><view class="center" slot='center'><text class="iconfont icon-sousuo" @click="search"></text></view><view class="right" slot='right'><text class="iconfont icon-richscan_icon"></text></view></search-slot><!--#endif-->
本文链接地址:https://www.jiuchutong.com/zhishi/297563.html 转载请保留说明!

上一篇:【TypeScript】TS 看这一篇就够了(typescripte)

下一篇:解决雪花算法生成的ID传输前端后精度丢失(雪花算法workid)

  • windows10任务管理器快捷键怎么打开(Windows10任务管理器卡顿)

    windows10任务管理器快捷键怎么打开(Windows10任务管理器卡顿)

  • wps怎么将字体加粗(wps怎么字体加宽)

    wps怎么将字体加粗(wps怎么字体加宽)

  • 淘宝不显示帮忙代付(淘宝怎么不显示帮我付)

    淘宝不显示帮忙代付(淘宝怎么不显示帮我付)

  • qq留言怎么设置仅彼此可见(qq留言怎么设置背景照片)

    qq留言怎么设置仅彼此可见(qq留言怎么设置背景照片)

  • 网络连通性异常怎么办(网络连通性异常站点可用性异常)

    网络连通性异常怎么办(网络连通性异常站点可用性异常)

  • b站直播怎么设置密码(b站直播怎么设置房管)

    b站直播怎么设置密码(b站直播怎么设置房管)

  • 爱奇艺全屏看不到字幕(爱奇艺全屏看不到上面)

    爱奇艺全屏看不到字幕(爱奇艺全屏看不到上面)

  • a1822是ipad air2吗(a1822是ipad2017吗)

    a1822是ipad air2吗(a1822是ipad2017吗)

  • 苹果11可以下载两个微信吗(苹果11可以下载电子称重器吗)

    苹果11可以下载两个微信吗(苹果11可以下载电子称重器吗)

  • iphone11突然黑屏怎么按都没反应(iphone11突然黑屏无法打开了)

    iphone11突然黑屏怎么按都没反应(iphone11突然黑屏无法打开了)

  • 怎样把qq相册传到微信(怎样把qq相册传到电脑上)

    怎样把qq相册传到微信(怎样把qq相册传到电脑上)

  • 怎么添加威锋软件源(怎么添加威锋软件到桌面)

    怎么添加威锋软件源(怎么添加威锋软件到桌面)

  • 余额宝体验金是什么(余额宝体验金是什么回事用不用还)

    余额宝体验金是什么(余额宝体验金是什么回事用不用还)

  • 计算机off键是什么键(计算机上off键的功能是什么)

    计算机off键是什么键(计算机上off键的功能是什么)

  • vivor9有nfc功能吗(vivo x9l有没有nfc)

    vivor9有nfc功能吗(vivo x9l有没有nfc)

  • 苹果6时间怎么设置(苹果6时间怎么设置在桌面)

    苹果6时间怎么设置(苹果6时间怎么设置在桌面)

  • g5400能吃鸡吗(g5400处理器可以玩吃鸡吗)

    g5400能吃鸡吗(g5400处理器可以玩吃鸡吗)

  • 越南电压和中国电压一样吗(越南电压跟大陆的一样吗)

    越南电压和中国电压一样吗(越南电压跟大陆的一样吗)

  • 爱奇艺手机号换了怎么办(爱奇艺手机号换绑会员还在吗)

    爱奇艺手机号换了怎么办(爱奇艺手机号换绑会员还在吗)

  • 抖音视频可二次编辑吗(抖音视频可二次推广吗)

    抖音视频可二次编辑吗(抖音视频可二次推广吗)

  • 苹果手机微信怎么开美颜(苹果手机微信怎么多开)

    苹果手机微信怎么开美颜(苹果手机微信怎么多开)

  • 优酷如何取消预约(优酷如何取消预约会员)

    优酷如何取消预约(优酷如何取消预约会员)

  • Win10 KB5004945 更新后多个品牌打印机无法使用的解决方法

    Win10 KB5004945 更新后多个品牌打印机无法使用的解决方法

  • 电竞显示器怎么选?小编教你如何挑选专业电竞(电竞显示器怎么调整参数)

    电竞显示器怎么选?小编教你如何挑选专业电竞(电竞显示器怎么调整参数)

  • 公司内部个人股份怎么算
  • 企业所得税季末数怎么填
  • 全面一次性奖金收入扣税标准
  • 增值税减免税款怎么算
  • 小规模纳税人租金发票的税率是多少
  • 残保金计算包括五险一金吗
  • 公司现金支付管理办法
  • 低值易耗品计入什么账户
  • 赡养老人专项附加扣除可以是爷爷奶奶吗
  • 自行开发的软件如何确认为无形资产
  • 机械设备租赁征求意见稿
  • 公司交增值税的好处
  • 资产负债表年初余额是不是一直不变
  • 收到技术服务费计入什么科目
  • 生产企业报关单金额大于发票金额
  • 金税三期收回长期投资所得税如何申报?
  • 运费发票备注栏新规定
  • 赠送的商品怎么入账
  • 外贸企业出口收入怎么账务处理
  • 房产企业开发产品出租
  • 企业确定无法支付的
  • 企业为员工支付房租交个税吗
  • 分包利润是多少
  • 鸿蒙侧边菜单
  • win7如何取消关机
  • 怎么用u盘启动dos
  • 商业支付时使用
  • 如何申请税务发票
  • spss安装后无法启动,并行配置不正确
  • 招待费如何列支
  • win10系统如何设置开机启动软件
  • 协调费用应该怎么表述才合理
  • PHP:spl_autoload_register()的用法_spl函数
  • 企业采用备抵法核算坏账
  • 前端大屏常用的输入法
  • php socket 非阻塞
  • 未交增值税的核算方法
  • 市职工报销比例多少
  • 给客户开的发票,在邮寄过程中丢了怎么办?
  • tomcat-juli
  • 商贸企业发生退税的原因
  • sql随机数字
  • mongodb建立索引的命令
  • mongodb查看数据库大小
  • 发票清单用什么纸打印出来
  • 专项资金支出流程
  • sql2008用户sa登录失败
  • 外地职工的界定
  • 代扣代缴增值税如何申报抵扣
  • 积分购物骗局
  • 过路费怎么抵扣进项税额报表怎么填
  • 生产成本要如何核算
  • 销售 返利
  • 票已收到、款未付会计分录
  • 本月增加的固定资产本月可以进行部门转移
  • 月底现金余额
  • 建立明细账科目怎么排顺序
  • centos 6.5下 mysql-community-server. 5.7.18-1.el6安装
  • win8.1 升级
  • dsapi.exe是什么
  • 在win7操作系统中通过什么可以查看计算机的配置
  • 电脑连不上网怎么解决
  • redhat linux安装
  • 猫的所有视频
  • python简要说明读取文件的一般流程
  • python中的条件判断和循环语句
  • python连接Oracle数据库
  • android基础入门教程
  • 玩转兽世:兽夫,亲一个
  • python3 冒泡排序
  • javascript基础笔记
  • jquery22插件网
  • ajax获取数据两种类型
  • android设计模式单例有几种
  • 税务局约谈记录
  • 办理税控盘的流程
  • 四川十大纳税企业
  • 慰问金能直接转账吗
  • 浙江省个人医保累计自费多少可以报销
  • 关于返回
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设