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

  • 小爱翻译怎么添加到桌面(小爱翻译怎么添加到控制中心)

    小爱翻译怎么添加到桌面(小爱翻译怎么添加到控制中心)

  • 华为荣耀play3怎么设置指纹解锁(华为荣耀play3怎么开启隐私空间)

    华为荣耀play3怎么设置指纹解锁(华为荣耀play3怎么开启隐私空间)

  • 怎么把图片弄到word上(怎么把图片弄到cad里面去)

    怎么把图片弄到word上(怎么把图片弄到cad里面去)

  • 闲鱼上的苹果手机为什么这么便宜(闲鱼上的苹果手机可靠吗)

    闲鱼上的苹果手机为什么这么便宜(闲鱼上的苹果手机可靠吗)

  • 退出b站激励计划还限流吗(退出B站激励计划激励金怎么办)

    退出b站激励计划还限流吗(退出B站激励计划激励金怎么办)

  • iphone11 128g够用吗(苹果11 128g够用)

    iphone11 128g够用吗(苹果11 128g够用)

  • qq音乐付费包和会员有什么区别(qq音乐付费包和绿钻)

    qq音乐付费包和会员有什么区别(qq音乐付费包和绿钻)

  • 电脑ua啥意思(电脑ul是什么意思)

    电脑ua啥意思(电脑ul是什么意思)

  • 佳能和尼康的区别(佳能和尼康哪个更容易上手)

    佳能和尼康的区别(佳能和尼康哪个更容易上手)

  • 腾讯会员能有几个人登录(腾讯会员能有几个人去看)

    腾讯会员能有几个人登录(腾讯会员能有几个人去看)

  • 蠕虫病毒攻击网络的主要方式是(蠕虫病毒攻击端口)

    蠕虫病毒攻击网络的主要方式是(蠕虫病毒攻击端口)

  • mate20pro要不要贴膜

    mate20pro要不要贴膜

  • 抖音怎么删除喜欢的作品(抖音怎么删除喜欢和收藏的视频)

    抖音怎么删除喜欢的作品(抖音怎么删除喜欢和收藏的视频)

  • iphone6splus和iphone6plus区别(iphone6splus和iphone6s)

    iphone6splus和iphone6plus区别(iphone6splus和iphone6s)

  • vivoz5x有红外线功能吗(vivoz5红外线在哪)

    vivoz5x有红外线功能吗(vivoz5红外线在哪)

  • 苹果6s plus没声音怎么回事(苹果6s plus没声音)

    苹果6s plus没声音怎么回事(苹果6s plus没声音)

  • 微视红包记录在哪里(微视里面的红包哪里去找)

    微视红包记录在哪里(微视里面的红包哪里去找)

  • iOS升到13后能不能变回ios12(苹果升到13系统还能不能降了)

    iOS升到13后能不能变回ios12(苹果升到13系统还能不能降了)

  • 央视投屏助手怎么用(央视投屏助手怎么安装)

    央视投屏助手怎么用(央视投屏助手怎么安装)

  • 地图如何不显示文字(地图改位置怎么改)

    地图如何不显示文字(地图改位置怎么改)

  • 710和710f有什么区别(710和710i)

    710和710f有什么区别(710和710i)

  • 京东哪里申请闪电退款(京东怎么申请闪电退款)

    京东哪里申请闪电退款(京东怎么申请闪电退款)

  • field test是什么基带(field test mode)

    field test是什么基带(field test mode)

  • 电脑键盘字母乱了(电脑键盘字母乱了怎么恢复)

    电脑键盘字母乱了(电脑键盘字母乱了怎么恢复)

  • 小满nestjs(第一章 介绍nestjs)(小满秒懂百科)

    小满nestjs(第一章 介绍nestjs)(小满秒懂百科)

  • 企业所得税税前扣除吗
  • 车辆购置税计入成本吗
  • 冲减计提
  • 企业转出多交增值税吗
  • 现流表怎么编
  • 土地使用权摊销计入在建工程
  • 房地产企业增值税纳税义务发生时间
  • 长期借款账务处理会计分录例题
  • 含有增值税的工程项目
  • 增值税视同销售包括哪些情况?
  • 无形资产转让计入什么科目
  • 每月认证多少发票怎么算
  • 教育费附加计算公式
  • 中方人员取得的工资、薪金所得,征收个人所得税有特别规定吗?
  • 住宿业的配套服务有哪些
  • 企业卖固定资产
  • 一个月的销售额
  • 年末计提银行借款利息
  • 集团公司收取管理费是否可以税前列支
  • 在windows7提供了一种什么技术
  • qctray.exe - qctray进程 是什么文件 作用是什么
  • 医疗保险中的大病保险怎么报销
  • 权益法转成本法为什么用账面价值
  • 计算完工产品成本和在产品成本的方法有哪些
  • 成本法处置子公司丧控合并层面
  • 时间序列转换
  • php数组的类型有哪些
  • 保姆级教程什么意思
  • vue中created和mounted
  • pytorch csdn
  • 如何测试php
  • 发票写的是信息怎么办
  • 企业所得税包含在税金及附加里面吗
  • 代收代付业务需要开发票吗
  • 经营性应收项目和经营性应付项目
  • vue移动组件
  • python索引值-1和位置-1
  • 非三包退车能否退款
  • 印花税减半征收政策什么时候开始的
  • ibm.data.db2
  • Table ‘xxx’ is marked as crashed and should be repaired 错误解决方法参考
  • 关于材料采购的通知
  • 商业折扣应该怎么计算
  • 医院执行政府会计制度操作指南 .pdf
  • 预包装销售是什么意思
  • 纳税人防伪税控设备未抄报怎么办
  • 现金支付无发票怎么报销
  • 未实现内部交易损益是什么意思
  • 废料销售的会计处理
  • 外贸采购的职责
  • 销售现金优惠会计分录
  • 购买银行结构性存款安全吗
  • 内账外账用一个云盘可以吗
  • 合同取得成本包括什么
  • windows怎么连无线
  • ubuntu 无线wifi
  • linux自动化装机
  • win8系统与win10哪个好
  • 怎么修改抖音号
  • windows xp的控制面板
  • angularjs表格控件
  • android自定义控件入门与实战
  • 如何做批处理命令
  • Unity3D游戏开发引擎
  • 万向节锁到底是什么
  • js中||的用法
  • Android笔记本
  • 图片批量压缩到200k以下
  • eclipse安转
  • shell脚本查找
  • python中字符串的方法
  • 充电显示调整差额是什么意思
  • javascript学习指南
  • jquery trigger函数执行两次的解决方法
  • js中refresh
  • android 图片裁剪 任意形状
  • 汽车车船税怎么交
  • 土地增值税的房屋转让指出售 赠与
  • 四川税务2021
  • 重庆国税电子税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设