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

  • 用QQ群疯狂推广的5种方法(qq群推广有用吗)

    用QQ群疯狂推广的5种方法(qq群推广有用吗)

  • 华为nova5pro的耳机插在哪(华为手机耳机孔在哪里nova5 pro)

    华为nova5pro的耳机插在哪(华为手机耳机孔在哪里nova5 pro)

  • 苹果x为什么突然掉电厉害(苹果x为什么突然没有声音了)

    苹果x为什么突然掉电厉害(苹果x为什么突然没有声音了)

  • 微信显示对方无法接收消息(微信显示对方无应答有几种情况可能)

    微信显示对方无法接收消息(微信显示对方无应答有几种情况可能)

  • 闲鱼商品保护怎么解除(闲鱼商品保护怎么取消)

    闲鱼商品保护怎么解除(闲鱼商品保护怎么取消)

  • iphone11录像功能不见了(苹果11咋个录像)

    iphone11录像功能不见了(苹果11咋个录像)

  • 笔记本电脑能开直播吗(笔记本电脑能开流量吗)

    笔记本电脑能开直播吗(笔记本电脑能开流量吗)

  • 艾肯声卡怎么连接手机(艾肯声卡怎么连接蓝牙耳机)

    艾肯声卡怎么连接手机(艾肯声卡怎么连接蓝牙耳机)

  • ps的网络意思是什么(ps网络语)

    ps的网络意思是什么(ps网络语)

  • 拼多多0元试用后要钱么(拼多多0元试用怎么开)

    拼多多0元试用后要钱么(拼多多0元试用怎么开)

  • 主板8+4只插8能开机吗(8+4主板两个必须插吗)

    主板8+4只插8能开机吗(8+4主板两个必须插吗)

  • 手机照片jpg格式是什么意思(手机照片jpg格式怎么弄)

    手机照片jpg格式是什么意思(手机照片jpg格式怎么弄)

  • 台式电脑的摄像头在哪(台式电脑的摄像头和麦克风)

    台式电脑的摄像头在哪(台式电脑的摄像头和麦克风)

  • 极速验号对淘宝账号有影响吗(极速验号对淘宝有影响吗)

    极速验号对淘宝账号有影响吗(极速验号对淘宝有影响吗)

  • 手机微信群打不开怎么办(微信群打不了怎么回事)

    手机微信群打不开怎么办(微信群打不了怎么回事)

  • 买苹果11有什么配件(买苹果11什么颜色好)

    买苹果11有什么配件(买苹果11什么颜色好)

  • 一加7pro与一加7tpro区别(一加7pro与一加8对比)

    一加7pro与一加7tpro区别(一加7pro与一加8对比)

  • 怎么看微信群里有没有自己的好友(怎么看微信群里某个人发的所有信息)

    怎么看微信群里有没有自己的好友(怎么看微信群里某个人发的所有信息)

  • 手机出现竖条纹怎么办(手机出现竖条纹怎么回事)

    手机出现竖条纹怎么办(手机出现竖条纹怎么回事)

  • 如何获得京东必购码(京东必购怎么获得)

    如何获得京东必购码(京东必购怎么获得)

  • 华为手机拼图在哪里(华为手机拼图在哪里找到)

    华为手机拼图在哪里(华为手机拼图在哪里找到)

  • 华为定位服务打不开(华为定位服务打开好还是关闭好)

    华为定位服务打不开(华为定位服务打开好还是关闭好)

  • 网页浏览器字体模糊要怎么才能解决?(网页浏览器字体颜色怎么改)

    网页浏览器字体模糊要怎么才能解决?(网页浏览器字体颜色怎么改)

  • vue3中实现异步组件(vue解决异步取值问题)

    vue3中实现异步组件(vue解决异步取值问题)

  • 资产负债表债务法核算所得税
  • 土地款发票是否可以抵扣
  • 应付账款超过三年未付
  • 肉联厂销售模式
  • 购进国产设备的增值税处理规定
  • 用友软件销售操作流程
  • 计算土地增值税时增值税可以扣除吗
  • 普通发票作废怎么验旧
  • 资产负债表的应付职工薪酬怎么填
  • 运输公司赔偿计入什么科目
  • 出纳现金日记账表格模板
  • 企业支付员工一年多少钱
  • 计提的利息汇算清缴前没发放,需要交企业所得税吗
  • 公司的日常开销开发票怎么写
  • 携税宝的费用可以全额抵扣吗
  • 营改增要交增值税吗
  • 三代税款手续费申请流程
  • 本月工资下月发是什么意思
  • 现金流量表中所指的现金是指( )
  • 坏账处理的所得税税率
  • 结构化存款是什么
  • 小型微利企业要交残保金吗
  • 建筑行业收到劳务发票入工程施工科目
  • 个人垫付汽车修理怎么办
  • 暂估固定资产原值减少
  • 一键ghost有用吗
  • windows无法连接到打印机指定的网络名不再可用
  • 收到负数发票怎么办
  • linux中添加用户和组的操作
  • 公司报销医疗费用公司医保里面的钱也报吗
  • vue-router跳转
  • 委托加工物资账务怎么做
  • 商铺转让权是什么意思
  • 未实际发生的费用 可否申请赔偿
  • 元宇宙产业链
  • 叶面积指数名词解释
  • 建筑业预缴的个人所得税怎么在申报表体现
  • vue系列教程
  • python del语法
  • 建筑企业提供建筑服务适用一般计税方法的,以取得
  • python用途
  • 简述sql server
  • 个税系统经营所得人员怎样添加
  • 发行债券支付的发行费用计入哪里
  • 关于事业支出期末的结转
  • 资产减值准备怎么提
  • 为什么贷款要收手续费
  • 减值损失账务处理
  • 企业之间土地交易
  • mysql数据库主机一般填什么
  • win95开始菜单
  • u盘安装win8.1系统教程
  • 苹果mac 最新系统
  • 电脑系统信息怎么关闭
  • windows xp 任务栏在右边
  • win8.1怎么用
  • linux socket 常用函数小结
  • win8metro版桌面安卓下载
  • windows7的注册表在哪里
  • windows8快速关机
  • .json()
  • jquery实现回到顶部
  • cocos creator内存性能优化
  • unity onbecameinvisible
  • opengl房子建模
  • javascript几种数据类型
  • bat脚本自动点击按钮
  • python安装pip.whl
  • js 上传
  • nodejs读取文件夹下的所有文件
  • listview item
  • linux查看shell脚本内容
  • js函数嵌套函数的return
  • checkbox批量删除
  • jquery点击方法
  • 江苏省国税局客服电话
  • 00后先进人物事迹简介
  • 工程增值税率从11%调整到9%
  • 税务打虚打骗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设