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

  • 论坛发帖推广技巧(论坛推广的操作方法)

    论坛发帖推广技巧(论坛推广的操作方法)

  • 微信举报双封是什么意思(微信举报双封是什么)

    微信举报双封是什么意思(微信举报双封是什么)

  • 计算机的软件系统可分为(计算机的软件系统包括哪几部分)

    计算机的软件系统可分为(计算机的软件系统包括哪几部分)

  • 快手显示ta什么意思(快手号显示ta什么意思)

    快手显示ta什么意思(快手号显示ta什么意思)

  • 苹果手机为什么微信电话没有提示(苹果手机为什么突然黑屏)

    苹果手机为什么微信电话没有提示(苹果手机为什么突然黑屏)

  • 苹果手机分辨率要设置多少比较清晰(苹果手机分辨率和安卓手机分辨率)

    苹果手机分辨率要设置多少比较清晰(苹果手机分辨率和安卓手机分辨率)

  • 微信建群会提醒对方吗(建群会有提示吗)

    微信建群会提醒对方吗(建群会有提示吗)

  • 淘宝上买完东西店铺不存在为什么(淘宝网上购物)

    淘宝上买完东西店铺不存在为什么(淘宝网上购物)

  • 微信是黑色主题怎么能换回来(微信黑色主题怎么改成白色主题)

    微信是黑色主题怎么能换回来(微信黑色主题怎么改成白色主题)

  • 微信不小心退出登录了怎么办(微信不小心退出了,忘记密码怎么登录)

    微信不小心退出登录了怎么办(微信不小心退出了,忘记密码怎么登录)

  • 苹果xsmax照相全屏设置(苹果xsmax照相全屏怎么设置)

    苹果xsmax照相全屏设置(苹果xsmax照相全屏怎么设置)

  • pr与显卡驱动不兼容(pr2020与显卡驱动不兼容)

    pr与显卡驱动不兼容(pr2020与显卡驱动不兼容)

  • 手机存储文件哪些能删除(手机储存文件的app排行)

    手机存储文件哪些能删除(手机储存文件的app排行)

  • 手机声音太小是怎么回事(手机声音太小是怎么回事怎么解决)

    手机声音太小是怎么回事(手机声音太小是怎么回事怎么解决)

  • 快手视频下载到本地(快手视频下载到电脑上)

    快手视频下载到本地(快手视频下载到电脑上)

  • 手机原彩显示什么意思(手机原彩显示在哪里)

    手机原彩显示什么意思(手机原彩显示在哪里)

  • vivo手机右上角显示hd(vivo手机右上角有个手机图案是什么)

    vivo手机右上角显示hd(vivo手机右上角有个手机图案是什么)

  • AirPods Pro防水等级是多少(airpods pro防水怎么样)

    AirPods Pro防水等级是多少(airpods pro防水怎么样)

  • 千牛怎么取消自动回复(千牛怎么取消自动同意退货)

    千牛怎么取消自动回复(千牛怎么取消自动同意退货)

  • 月牙泉在哪里(青海月牙泉在哪里)

    月牙泉在哪里(青海月牙泉在哪里)

  • 呼出未接通被拉黑了吗(呼出未接通会扣话费吗)

    呼出未接通被拉黑了吗(呼出未接通会扣话费吗)

  • 手机浏览器点开闪退怎么办(手机浏览器点开有不良视频出现怎么关闭)

    手机浏览器点开闪退怎么办(手机浏览器点开有不良视频出现怎么关闭)

  • iqoopro防水吗(iQOOPro防水吗?)

    iqoopro防水吗(iQOOPro防水吗?)

  • 黑马程序员学费是多少(黑马程序员学费可以讲价吗)

    黑马程序员学费是多少(黑马程序员学费可以讲价吗)

  • ppt如何添加二级标题(ppt如何添加二级文本)

    ppt如何添加二级标题(ppt如何添加二级文本)

  • 双语 | 电影史上最浪漫台词 哪一句最打动你?(史上伟大电影)

    双语 | 电影史上最浪漫台词 哪一句最打动你?(史上伟大电影)

  • 土地增值税税率2023
  • 增值税发票是什么纸张型号
  • 销售货物开票及销售收入
  • 什么是调账的依据
  • 生产车间的办公用品费计入
  • 以经营房产投资合营收固定收益如何开发票?
  • 土建工程维修
  • 收款和出库哪个借方哪个贷方?
  • 新车检测费能入什么科目
  • 专票没有抵扣联可以作废吗
  • 红字发票重复提交了数据该怎么处理
  • 未达起征点是什么
  • 制造企业发出材料成本的计价方法
  • 销售商品发生的运费计入什么科目
  • 补开的银行手续费发票怎么做账
  • 进口货物付款计入哪个科目?
  • 预付账款损失的账务处理如何编制呢?
  • 增值税一般纳税人认定标准
  • 逃避缴纳税款罪移送公安标准
  • 处置无形资产净收益
  • 多计提的费用怎么冲销
  • 冲减材料采购成本
  • 其他权益工具投资公允价值变动怎么计算
  • 鸿蒙系统桌面如何设置
  • 华为手机隐藏应用
  • 在当前目录下打开cmd
  • 企业购买银行理财
  • PHP:ereg_replace()的用法_Regex正则函数
  • 公司承担的社保公积金怎么做账
  • 工程施工与工程结算在资产负债表里
  • 大城遗址公园
  • 货物运输印花税计算公式
  • 商贸企业税收优惠政策
  • 韦罗尼卡
  • 应收账款账务处理及案例分析
  • 微前端的好处和缺陷
  • php文件怎么创建
  • Yii2表单事件之Ajax提交实现方法
  • midjourney 初级使用说明
  • es6解构赋值对象
  • 利用php生成静态数据
  • 固定资产清理应交增值税怎么算
  • 未分配利润在科目余额表里怎么看
  • 什么是附加税举个例子
  • 什么情况下可以提取公积金
  • wordpress怎么安装插件
  • python中exec执行如何获取返回值
  • 个人所得税退税退多少钱怎么算
  • 个体经营所得税核定征收2023税率
  • 发票与销售小票有什么区别?
  • 会计估计变更和政策变更有哪些
  • 工程造价咨询服务费收费标准
  • 清算所得税计税基础
  • 付了电费当月没有收到发票
  • 研发产品收入的会计分录
  • 无法支付其他应付款核销条件
  • 收到一张发票摘要怎么填
  • 注册资金未缴齐怎么处理
  • 原材料采用实际成本法,在会计核算上应设置的账户是
  • 对于审核后的凭证可直接修改对吗
  • 盘亏的固定资产是资产吗
  • 公司的软件服务器设置什么意思啊
  • 食堂的电费能分两次交吗
  • 开始菜单里设置在哪里
  • 如何移植操作系统
  • gnuradio编写模块
  • 文件在移动或复制过程中权限的变化
  • win10无法
  • win8 metro界面
  • Percona Server 5.5.44-37.3/5.6.25-73.0 发布
  • win7使用临时配置文件登录
  • ant压缩包删除
  • linux find命令的使用
  • Unity3D之Transform参数
  • jquery修改字体
  • python生成pyc
  • 湖南国税电子税务局官方网
  • 南昌高新税务局上班时间
  • 会计基础工作规范2024
  • 税务局怎么知道房屋出租
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设