位置: 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)

  • 苹果13深色模式怎么设置(苹果13深色模式和浅色模式哪个好)

    苹果13深色模式怎么设置(苹果13深色模式和浅色模式哪个好)

  • 小米10的操作系统是安卓几(小米10pro操作系统)

    小米10的操作系统是安卓几(小米10pro操作系统)

  • 抖音作品审核中是怎么回事(抖音作品审核中别人能看到吗)

    抖音作品审核中是怎么回事(抖音作品审核中别人能看到吗)

  • 960显卡2g和4g的区别(960显卡2g和4g的区分)

    960显卡2g和4g的区别(960显卡2g和4g的区分)

  • 裸机是指计算机仅有(裸机是指计算机只有硬件没有软件)

    裸机是指计算机仅有(裸机是指计算机只有硬件没有软件)

  • 12306会员要钱吗(12306会员需要钱吗)

    12306会员要钱吗(12306会员需要钱吗)

  • 抖音里的画中画视频是怎么合成的(抖音里的画中画怎么做的)

    抖音里的画中画视频是怎么合成的(抖音里的画中画怎么做的)

  • 抖音直播付费人数是什么意思(抖音付费直播是什么)

    抖音直播付费人数是什么意思(抖音付费直播是什么)

  • 一个路由器可以插几根网线(一个路由器可以连接两个路由器吗)

    一个路由器可以插几根网线(一个路由器可以连接两个路由器吗)

  • 现在微信评论可以被别人看到吗(微信评论可以被删除吗)

    现在微信评论可以被别人看到吗(微信评论可以被删除吗)

  • 电脑可以用充电宝充电吗(电脑可以用充电线给手机充电吗)

    电脑可以用充电宝充电吗(电脑可以用充电线给手机充电吗)

  • 打电话显示虚拟运营商是什么意思(打电话显示虚拟运营商)

    打电话显示虚拟运营商是什么意思(打电话显示虚拟运营商)

  • 抖音评论显示发言太快怎么回事(抖音我发评论为啥别人看不见)

    抖音评论显示发言太快怎么回事(抖音我发评论为啥别人看不见)

  • 爱奇艺怎么下载高清电影(爱奇艺怎么下载动画片到u盘)

    爱奇艺怎么下载高清电影(爱奇艺怎么下载动画片到u盘)

  • oppoa3hd怎么关闭(oppoa53hd怎么关闭)

    oppoa3hd怎么关闭(oppoa53hd怎么关闭)

  • 网易云音乐8级什么概念(网易云音乐8级要听多少歌)

    网易云音乐8级什么概念(网易云音乐8级要听多少歌)

  • 同一手机如何申请第二个微信号(同一手机如何申请健康码)

    同一手机如何申请第二个微信号(同一手机如何申请健康码)

  • 域名系统的阐述及作用(域名系统的基本概念)

    域名系统的阐述及作用(域名系统的基本概念)

  • 苹果手表4和3的差别(苹果手表4和3的区别在哪)

    苹果手表4和3的差别(苹果手表4和3的区别在哪)

  • 计算器中的cnc叫什么键(计算器中的cnc叫什么名称)

    计算器中的cnc叫什么键(计算器中的cnc叫什么名称)

  • oppor17手机怎么关机(oppor17手机怎么恢复出厂设置方法)

    oppor17手机怎么关机(oppor17手机怎么恢复出厂设置方法)

  • 浏览器怎么改成兼容模式(浏览器怎么改成默认浏览器)

    浏览器怎么改成兼容模式(浏览器怎么改成默认浏览器)

  • iphone11pro max是5G吗

    iphone11pro max是5G吗

  • 苹果x怎么查询激活时间(苹果X怎么查询第一次使用时间)

    苹果x怎么查询激活时间(苹果X怎么查询第一次使用时间)

  • 路由器怎么看几个人连接(路由器怎么看几个人在用)

    路由器怎么看几个人连接(路由器怎么看几个人在用)

  • cpu的指令又称为(CPU的指令又称为)

    cpu的指令又称为(CPU的指令又称为)

  • 为什么搜不到蓝牙耳机(为什么搜不到蓝牙鼠标设备)

    为什么搜不到蓝牙耳机(为什么搜不到蓝牙鼠标设备)

  • 电脑椅什么牌子好,什么牌子的电脑椅好(图文)(电脑椅什么牌子质量好)

    电脑椅什么牌子好,什么牌子的电脑椅好(图文)(电脑椅什么牌子质量好)

  • 计提税金账务处理
  • 简易征收 抵扣进项
  • 远期交易怎么结算
  • 去年的财务报表可以更正申报吗
  • 电子发票作废了还能恢复吗
  • 发票分开开票
  • 专家咨询费个人所得税怎么计算
  • 建筑企业施工管理人员
  • 土增税土地成本分摊方法
  • 核算科目拨出专票怎么弄
  • 银行承兑汇票到期日后多久可以承兑
  • 新公司没业务怎么做账
  • 学校有没有纳税人识别号
  • 开专票必须公对公付款不然不开
  • 每个月工资都不一样,怎么计算个税
  • 废旧物资销售如何征税
  • 电子税务局里的利润表,本月金额是填累计数吗
  • 企业的其他业务收入有
  • 转售水电收入
  • 交易性金融资产的账务处理
  • 转正工资和试用工资区别
  • 工程结算属于哪个类别
  • 本月无收入怎样申报?
  • 合并报表长投和所有者权益抵消的原理
  • 商业保险费包括哪些
  • 上年度所得税未计提已交本年度如何计提
  • 错账按产生原因来看有两种
  • 未开票收入跨年开票
  • 所得税到底按会计分录吗
  • php有很多流行的mvc框架,这些框架可以
  • 年末进公司有年终奖吗
  • 辅导期纳税人注意事项
  • 建筑行业施工规范有哪些
  • phpstudy删除
  • 前端面试题目100及最佳答案
  • 亚伯拉罕湖中的树,加拿大艾伯塔 (© Coolbiere/Getty Images)
  • 建设工程项目设计质量控制的内容
  • 谷歌浏览器跨域解决方案
  • css如何应用
  • 用人单位招用失业人员补贴
  • wordpress整站备份
  • 施工企业工人工资付给包工头老板需要写什么模板
  • 与取得收入无关的费用支出可以扣除吗
  • 应发工资与应税的区别
  • 辅助生产车间工人工资计入
  • 公司法人的分类是什么
  • 四种股利分配政策及适用情况
  • 法人股东 分红
  • 投资性房地产在建期间需要摊销吗
  • CentOS 7下MySQL服务启动失败的快速解决方法
  • mysql主从配置详解
  • 税务师考试的报名时间
  • 收购发票如何确认成本
  • 存货非正常损失进项税额转出分录
  • 增值税发票丢失罚款多少
  • 公司账户没有钱怎么发工资
  • 进项增值税发票抵扣期限
  • 存货跌价准备转回和转销的区别
  • 餐饮业做账会计分录大全,实用!
  • 累计折旧减少记哪方
  • 如何在sql server表中添加数据表格为什么没有显示
  • sql如何学
  • mysql的性能调优
  • Win10 Mobile 10549 预览版新功能上手体验视频
  • linux获取主目录的命令
  • 怎么安装u盘里的文件
  • win8快捷方式
  • linux怎么使用ping命令
  • 怎么隐藏不让别人发现
  • git 常用指令
  • linux 常用命令大全及其详解
  • cocos 2dx
  • unity音频导入设置
  • 搭建nodejs环境
  • angularjs2
  • 批处理打开网络连接
  • javascript indexOf函数使用说明
  • android 引用第三方库
  • 无锡医疗保险缴费比例
  • 怎么查询车船税缴费记录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设