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

  • 笔记本电脑黑屏怎么办(笔记本电脑黑屏)(笔记本电脑黑屏了按哪个键恢复)

    笔记本电脑黑屏怎么办(笔记本电脑黑屏)(笔记本电脑黑屏了按哪个键恢复)

  • wpsppt智能排版怎么没有了(wps2019智能排版)

    wpsppt智能排版怎么没有了(wps2019智能排版)

  • qq群投票如何修改自己的选择(qq群投票可以更改吗)

    qq群投票如何修改自己的选择(qq群投票可以更改吗)

  • 苹果手机充电总是一响一响的(苹果手机充电总是反复断开)

    苹果手机充电总是一响一响的(苹果手机充电总是反复断开)

  • 苹果电池显示维修怎么关闭(苹果电池显示维修什么意思)

    苹果电池显示维修怎么关闭(苹果电池显示维修什么意思)

  • iphone m开头的型号(苹果m开头的是什么型号)

    iphone m开头的型号(苹果m开头的是什么型号)

  • 平板没有输入法,打不了字 ,怎么办(平板没有输入法了是怎么回事)

    平板没有输入法,打不了字 ,怎么办(平板没有输入法了是怎么回事)

  • 朋友圈发图片怎么配音乐(朋友圈发图片怎么加音乐进去)

    朋友圈发图片怎么配音乐(朋友圈发图片怎么加音乐进去)

  • 为什么微信搜不到公众号文章(为什么微信搜不到手机号)

    为什么微信搜不到公众号文章(为什么微信搜不到手机号)

  • 路由器猫是什么(路由器光猫怎么连接)

    路由器猫是什么(路由器光猫怎么连接)

  • iphone8能不能分屏(iphone 8 能分屏吗)

    iphone8能不能分屏(iphone 8 能分屏吗)

  • 字符间距怎么设置(字符间距怎么设置缩放)

    字符间距怎么设置(字符间距怎么设置缩放)

  • 华为dub-tl00是什么型号(华为dubtl00型号)

    华为dub-tl00是什么型号(华为dubtl00型号)

  • wifi6是哪个频段的(wifi6的频率还是5ghz)

    wifi6是哪个频段的(wifi6的频率还是5ghz)

  • 手机充满电后会自动断电吗(手机充满电后会自动开机吗)

    手机充满电后会自动断电吗(手机充满电后会自动开机吗)

  • 选择性选择按哪个键(选择性啥意思)

    选择性选择按哪个键(选择性啥意思)

  • 闲鱼能申请退款几次(闲鱼能申请退款么)

    闲鱼能申请退款几次(闲鱼能申请退款么)

  • 苹果ios13怎么截长图(ios13.3怎么截图)

    苹果ios13怎么截长图(ios13.3怎么截图)

  • 小米电视座装可以自己安装吗(小米电视座装可以拆吗)

    小米电视座装可以自己安装吗(小米电视座装可以拆吗)

  • 拼多多账单明细怎么查(拼多多账单明细怎么删除)

    拼多多账单明细怎么查(拼多多账单明细怎么删除)

  • 苹果xr卡死机了怎么办(苹果xr卡死机了无法强制重启)

    苹果xr卡死机了怎么办(苹果xr卡死机了无法强制重启)

  • 12306候补下单怎么操作(12306候补下单怎么看排到第几位了)

    12306候补下单怎么操作(12306候补下单怎么看排到第几位了)

  • 小米8拍照有背景虚化吗(小米8拍照有背光功能吗)

    小米8拍照有背景虚化吗(小米8拍照有背光功能吗)

  • 什么是Android(android什么意思是什么手机)

    什么是Android(android什么意思是什么手机)

  • qq打卡有什么用吗(qq上的打卡有什么作用)

    qq打卡有什么用吗(qq上的打卡有什么作用)

  • Cookie会话跟踪技术(cookie 会话)

    Cookie会话跟踪技术(cookie 会话)

  • 消费税是指什么税
  • 工资储备金制度
  • 股权转让和变更法人一样吗?
  • 开矿泉水发票怎么开?
  • 仓库出入库账本图片大全
  • 卖废品开发票开什么货物名称
  • 实收资本能是现金流出吗
  • 职工教育经费8%怎么算
  • 其他权益工具投资是什么类科目
  • 收到应收的货款的会计分录
  • 汽车维修行业工时标准
  • 会计代理服务是什么行业
  • 服务性行业受气
  • 补缴的增值税可以计入以前年度损益调整
  • 怎么计算研发费用占销售收入总额比例
  • 电脑不支持windows 11
  • qq能上,网页打不开怎么回事
  • win11 应用商店
  • Windows XP具有类似于Apple Aqua的秘密主题
  • 发生坏账时的会计处理
  • 股票收益的计算公式
  • 孕妇不能吃哪些水果?
  • php教程全集
  • php time
  • 最小的触屏手机有哪些
  • laravel启动流程
  • 整体租赁合同
  • jsonobject忽略字段
  • clh锅
  • 集成代码
  • python查找列表元素
  • 小规模固定资产处置税率
  • 公允价值变动收益借方是增加还是减少
  • 税收罚款支出计入其他应付款吗对吗
  • 出纳记账凭证怎么写
  • 租赁公司车转到私人名下
  • 基本户转到法人账户会计分录
  • 帝国cms批量添加文章
  • 织梦如何开启会员功能
  • 月度合并报表与年度合并区别
  • 服务费发票需要交印花税吗
  • sqlserver2005 xml字段的读写操作
  • db2 select as
  • mongodb如何查询数据
  • mysql日志文件在哪
  • 企业所得税年报申报时间
  • 咨询服务业优惠政策
  • 应付账款主要是什么
  • 营业外支出是什么类账户
  • 原材料跌价分录
  • 职工福利费计提标准
  • 固定资产抵扣影响税负
  • 企业要怎样才能用到便宜的天然气
  • 固定资产无票怎样入账
  • 停产期间制造费用如何处理
  • 奖金如何做账分录
  • 公司报销给个人的会计分录
  • 多缴纳了个税税率怎么办
  • 前程无忧效果怎么样
  • 产品出库检验报告单格式
  • 公司增资有什么作用
  • macbookpro蓝牙找不到
  • centos添加自启动
  • solaris newfs
  • linux用户账户管理
  • Linux下SSH Session复制功能实现方法
  • win7系统自带游戏在哪
  • 如何自定义wifi名称
  • win10系统家庭版和专业版区别
  • win7ghost纯净版美化版
  • Win7如何关闭Smartscreen筛选器?Win7关闭Smartscreen筛选器的方法
  • linux bye
  • shell程序中定义的函数能不能有参数
  • linux c程序开发
  • 贴吧热门评论
  • 使用jquery操作dom
  • 网页制作css怎么用
  • jquery validate表单校验html
  • 上海市税务局招聘
  • 优化营商环境关于人才工作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设