H5+微信小程序中顶部导航设置:app-plus

这篇具有很好参考价值的文章主要介绍了H5+微信小程序中顶部导航设置:app-plus。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、前提说明:

首先uniapp代码在微信小程序和App、H5之间有时候是不兼容的,例如正常通过app-plus设置顶部导航,H5端是合适的

目的效果展示的结果:如图所示,我们需要实现这样的效果

H5+微信小程序中顶部导航设置:app-plus

1.H5端展示:

H5+微信小程序中顶部导航设置:app-plus

2.微信小程序端展示:

顶部没有出现搜索的图标和消息的图标

H5+微信小程序中顶部导航设置:app-plus

二、H5端实现说明:

1.查看官方文档(app-plus):

https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview-searchinput

H5+微信小程序中顶部导航设置:app-plus

如图我们也可以看到只兼容App+H5,并不兼容小程序

app-plus下有一个titleNview属性供我们实现导航栏文章来源地址https://www.toymoban.com/news/detail-480352.html

2.titleNView具体属性:

到了这里,关于H5+微信小程序中顶部导航设置:app-plus的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)

    目录 前言 App、H5效果 小程序效果 一、兼容APP、H5的方式 二、兼容小程序 三、实现同时兼容 首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下 在常见titleNView配置代码示例中可以看到基本样式的代码

    2024年02月03日
    浏览(39)
  • 微信小程序自定义顶部导航,滚动页面顶部导航颜色渐变

    微信小程序自定义顶部导航栏,使背景图置顶;当向上滚动页面时,实现顶部导航颜色渐变 实现方法 代码如下(示例): 提示:由于不同的手机机型顶部导航高度不一样,所有要获取手机的信息 总共三步: 1、初始化获取顶部导航信息 2、顶部导航文字上方通过view占位,同

    2024年02月11日
    浏览(39)
  • 微信小程序自动获取顶部导航栏高度

    1、本人是通过uniapp开发的微信小程序,原生开发基本相同,首先在data里声明变量 2、其次在onLoad生命周期中获取当前手机的导航栏宽高数据 3、navHeight获取的是当前手机型号的导航栏总高度;searchMarginTop获取的是手机顶部到小程序胶囊的高度,也就是下图黄色线框的高度;

    2024年02月11日
    浏览(56)
  • 微信小程序自定义顶部导航,附加返回主页按钮

      目录 一、修改对应json文件 二、获取微信小程序原生顶部导航栏的高  三、获取胶囊的宽高 四、设置wxml页面样式  话不多说,先上效果!!!       首先,我们都知道,通过原生小程序是不具备左侧胶囊的效果的,所以在实现这个功能的时候一定要记得修改当前页的jso

    2024年02月04日
    浏览(34)
  • 【微信小程序】头部导航栏背景铺满顶部

    背景:使用uniapp开发微信小程序 需求:需要微信小程序顶部导航栏使用页面背景铺满顶部 我们可以利用 navigationStyle 属性,来处理导航栏样式,支持 default/custom,其中 custom 可自定义导航栏,只保留右上角胶囊状的按钮。 在pages.json 文件里,将globalStyle中新增或修改 navigatio

    2024年02月16日
    浏览(34)
  • 微信小程序怎么隐藏顶部导航栏(navigationBar)变透明的解决方案

    怎么隐藏小程序顶部导航栏(navigationBar)? 官网说: Navigation 是小程序的顶部导航组件,当页面配置  navigationStyle  设置为  custom  的时候可以使用此组件替代原生导航栏。 那么,我们就知道这种效果是可以实现的,其实代码实现也超级简单,下面请看代码配置: 一、全局

    2024年02月08日
    浏览(35)
  • 微信小程序云开发之自定义顶部导航栏搜索框(非组件)

    提到微信小程序,就不得不提到它那磨人的顶部导航栏,真的有被丑到。身为强迫症患者,笔者实在是难以忍受,好在官方提供了解决方案,但是对于初学者还是有一丢丢的难度,为了初学者不在重蹈笔者的老路,这篇文章就给大家分享一下如何做一个好看的自定义顶部导航

    2024年02月10日
    浏览(32)
  • 【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)

    【微信小程序-原生开发】实用教程 轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)

    2024年02月09日
    浏览(70)
  • 微信小程序第一节 —— 自定义顶部、底部导航栏以及获取胶囊体位置信息。

    dai ga hou啊!我是 😘😘😘 是江迪呀 。我们在进行微信小程序开发时,常常需要自定义一些东西,比如 自定义顶部导航 、 自定义底部导航 等等。那么知道这些自定义内容的具体位置、以及如何适配不同的机型就变得尤为重要。下面让我以在iPhone机型,来给大家介绍下 微信

    2024年02月02日
    浏览(39)
  • 微信小程序自定义顶部导航栏的胶囊和微信自带的胶囊一样的透明背景色

    想要实现微信自带的右上角胶囊背景透明很简单,只需要在pages.js里面设置下面配置就可以了: 但是设置完这个后,胶囊的背景色是那种黑色半透明的效果:(微信开发者工具和真机上显示的效果不一致,要以真机为准) 手机端的效果:所以还是要以手机端为准   左侧的返

    2024年02月01日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包