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

  • 微软surfacepro4(微软surface pro 4)(微软surfacepro4怎么样)

    微软surfacepro4(微软surface pro 4)(微软surfacepro4怎么样)

  • 华为mate30pro怎么安装北斗导航(华为mate30pro怎么强制重启)

    华为mate30pro怎么安装北斗导航(华为mate30pro怎么强制重启)

  • 抖音发的视频别人看不到是为什么(抖音发的视频别人看了自己知道吗)

    抖音发的视频别人看不到是为什么(抖音发的视频别人看了自己知道吗)

  • 华为荣耀10充不上电是怎么回事(华为荣耀10充不上电开不了机怎么回事)

    华为荣耀10充不上电是怎么回事(华为荣耀10充不上电开不了机怎么回事)

  • fitbit闪退(fitbit闪退怎么办)

    fitbit闪退(fitbit闪退怎么办)

  • 看腾讯视频一卡一卡的(看腾讯视频一卡一卡的咋回事呢)

    看腾讯视频一卡一卡的(看腾讯视频一卡一卡的咋回事呢)

  • qq黑脸表情什么意思(qq的黑脸表情)

    qq黑脸表情什么意思(qq的黑脸表情)

  • 设置单元格样式在什么选项卡中完成(设置单元格样式为好)

    设置单元格样式在什么选项卡中完成(设置单元格样式为好)

  • 分布式文件系统和并行文件系统的特点

    分布式文件系统和并行文件系统的特点

  • 三星手机安全模式怎么解除(三星手机安全模式怎么切换到正常模式)

    三星手机安全模式怎么解除(三星手机安全模式怎么切换到正常模式)

  • 苹果11promax什么时候上市的(苹果11promax什么处理器)

    苹果11promax什么时候上市的(苹果11promax什么处理器)

  • 华为nova7如何截屏(华为nova7如何截屏手机屏幕)

    华为nova7如何截屏(华为nova7如何截屏手机屏幕)

  • 照片删除了怎么找回来(照片删除了怎么恢复回来vivo)

    照片删除了怎么找回来(照片删除了怎么恢复回来vivo)

  • 无线耳机有杂音滋滋(无线耳机怎么只有一边有声音)

    无线耳机有杂音滋滋(无线耳机怎么只有一边有声音)

  • 手机灰屏了怎么处理(手机灰屏了怎么恢复彩色)

    手机灰屏了怎么处理(手机灰屏了怎么恢复彩色)

  • 苹果手机爱奇艺会员取消不了(苹果手机爱奇艺如何取消连续包月自动续费)

    苹果手机爱奇艺会员取消不了(苹果手机爱奇艺如何取消连续包月自动续费)

  • word直线怎么加粗(word直线怎么加点)

    word直线怎么加粗(word直线怎么加点)

  • 酷喵vip能登录几个电视(酷喵vip能登录几台电视)

    酷喵vip能登录几个电视(酷喵vip能登录几台电视)

  • 微信社群空间怎么开通(微信社群空间怎么进入)

    微信社群空间怎么开通(微信社群空间怎么进入)

  • oppo手机4g变5g网络(oppo手机5g变成4g怎么恢复)

    oppo手机4g变5g网络(oppo手机5g变成4g怎么恢复)

  • 二维码收款多久到账(二维码收款多久有效)

    二维码收款多久到账(二维码收款多久有效)

  • 红米k30有呼吸灯吗(红米k30有呼吸灯么)

    红米k30有呼吸灯吗(红米k30有呼吸灯么)

  • 远程连接不上怎么处理(远程连接不上怎么回事)

    远程连接不上怎么处理(远程连接不上怎么回事)

  • 快门的主要作用(简述快门的主要作用)

    快门的主要作用(简述快门的主要作用)

  • 为什么打电话通话结束(为什么打电话通了没有声音)

    为什么打电话通话结束(为什么打电话通了没有声音)

  • 淘气值亲情怎么算互动(淘气值亲情号怎么算互动一次)

    淘气值亲情怎么算互动(淘气值亲情号怎么算互动一次)

  • 三星s10支持双卡吗(三星s10支持双卡双4g吗)

    三星s10支持双卡吗(三星s10支持双卡双4g吗)

  • 数据湖和数据仓库的差别(数据湖和数据仓库hudi)

    数据湖和数据仓库的差别(数据湖和数据仓库hudi)

  • 工商名称变更后多久网上可以查到记录
  • 城市维护建设税为什么是流转税
  • 企业所得税和预提所得税
  • 公司法人和经理承担责任一样吗
  • 地税票子怎么补办
  • 毛利率和主营利润率的区别
  • 经营许可证要交税吗
  • 事业单位固定资产管理办法
  • 树苗应计入什么科目里面
  • 季度应收账款周转天数是按多少天除
  • 进项税额转出结平分录怎么写
  • 一次性收取全年培训费
  • 工业企业制造费用具体怎么摊
  • 纳税申报表销售额可以是负数吗
  • 合伙企业发生亏损的原因
  • 找不到契税发票怎么办
  • 销售人员的提成属于什么工资
  • 租赁公司运输费计入什么科目
  • 空报税怎么报
  • 企业转让无形资产要交增值税吗
  • 可转换公司债券转股会计分录
  • 单位定期存款支取
  • 税务机关核定的计税价格是否含税
  • 哪些人需缴纳个人所得税
  • 什么收入不需要交税0税
  • 实收资本的账务处理例题
  • 增值税专票可以重开吗
  • 办理税务迁移
  • 英雄联盟电脑软件图片
  • macos15关闭sip
  • 广告联系电话
  • 职工福利费扣除率是多少
  • 原材料进项税税率
  • 电脑网页播放视频只有声音没有画面
  • php下载限速
  • php中strcmp函数
  • php运用于哪些领域
  • 分公司吸收新股怎么办
  • php mb_convert_encoding
  • 判断企业存货过多的判断方法
  • fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
  • phpipam使用
  • 归属性质
  • js的发展历史
  • 金融企业允许税前扣除的准备金
  • 前端请求方式
  • 接受捐赠的增值税要交企业所得税吗
  • wisdm数据集
  • 成品油发票如何下载库存
  • 外购货物用于在建工程分录
  • 转让不动产为什么能差额
  • 一次性计提和一次性支付的区别
  • 第四季度报表和年报对不上
  • 哪些合同不需要线上审批
  • sql查询必须在什么的基础上创建
  • 物业管理费专票税率是多少
  • 免税货物如何开具发票
  • 车辆转让怎么开票
  • 旅游饮食服务企业会计核算的特点包括
  • sql常用语句大全简书
  • ubuntu系统虚拟机安装教程
  • win10弹出提示
  • windows重置网卡cmd
  • linux epub阅读器
  • netddeclnt.exe - netddeclnt是什么进程 有什么用
  • linux如何修改账户名
  • w10系统屏幕一直在闪
  • win8电脑锁屏时间怎么设置方法
  • win8.1安装包
  • 手机物理游戏
  • python中requests小技巧
  • python库怎么用
  • 国家税务总局增值税发票查验平台官网
  • 广东高速费用支付宝支付如何开发票
  • 云南国家税务网上开票赋码
  • 济宁市税务局官网名称
  • 企业改制和重组的区别
  • 报考地税局的要求是什么
  • 个税系统崩溃
  • 小微企业企业所得税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设