如何去掉微信小程序导航栏，以及禁止页面滑动

最新推荐文章于 2025-03-30 19:24:59 发布

置顶涵岳散人

最新推荐文章于 2025-03-30 19:24:59 发布

阅读量9.3k

点赞数 2

文章标签：去除微信自带导航栏

本文链接：https://blog.csdn.net/qq_43732387/article/details/100992327

版权

如何去掉微信小程序导航栏，以及禁止页面滑动

1、微信小程序要去掉微信自带的导航栏，只需要在app.json中加上

"navigationStyle": "custom",隐藏显示微信自带导航栏，然后便可以使用自定义的导航！

2、禁止页面左右滑动，上下滑动，"disableScroll": true值为true是禁止，值为false时不禁止！

具体如下图所示

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

涵岳散人

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

详解微信小程序设置底部导航栏目方法

12-12

详解微信小程序设置底部导航栏目方法小程序底部想要有一个漂亮的导航栏目，不知道怎么制作，于是百度找到了本篇文章，分享给大家。好了小程序的头部标题设置好了，我们来说说底部导航栏是如何实现的。我们先来看个效果图这里，我们添加了三个导航图标，因为我们有三个页面，小程序最多能加5个。那他们是怎么出现怎么着色的呢？两步就搞定！ 1. 图标准备阿里图标库 http://www.iconfont.cn/collections/show/29 我们进入该网站，鼠标滑到一个喜欢的图标上面点击下方的下载按钮在弹出框中选择了俩个不同颜色的图标选择64px大小即可，我选择的是p

[微信小程序开发]如何去掉或隐藏小程序顶部栏navigationBar

03-29

小程序全局配置app.josn增加选项："navigationStyle": "custom", 具体如下：原生小程序开发打开 app.json： { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#000", "navigationStyle": "custom", "navigationBarTitleText": "WeChat" } } mpvue方式开发小程序>

1 条评论您还未登录，请先登录后发表或查看评论

微信小程序禁止页面上下滑动的三个方式

最新发布

dabaooooq的博客

03-30

226

在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json中添加disableScroll，会导致所有页面无法上下滑动，这就是个大bug了，解决也很简单，你想在那个页面禁止页面滑动，就在哪个页面的json下，添加disableScroll就可以了，单独设置就行！但是有些时候使用disableScroll并不合适，比如一个长页面，我需要弹窗出来的时候，才禁止上下滑动，弹窗隐藏的时候，又可以上下滑动！此方法呢，比较麻烦，写的代码比较多！

微信小程序之底部导航栏（一）

llixiangjian的博客

08-15

1828

前两周很忙碌的边学就边做项目了，时间很赶，还没好好的总结一下，开发的时候自己就首先去看了小程序的API和对其目录结构的了解以及其工具的使用。在了解完这些后开始进行对小程序开发的设计进行了大体的规划及搭建，其实小程序跟Android界面设计基本都那样。好了，就从自己搭建项目开始的每个小块进行开始。下面是对“tabBar”的简单应用，小程序API也可以直接进行拷贝复制小程序API 的htt

微信小程序怎么隐藏顶部导航栏（navigationBar）变透明的解决方案

南通SEO

09-12

3874

怎么隐藏小程序顶部导航栏（navigationBar）？Navigation是小程序的顶部导航组件，当页面配置设置为custom的时候可以使用此组件替代原生导航栏。

微信小程序、钉钉小程序如何去掉导航栏

GDNLQ的博客

04-01

1120

微信小程序、钉钉小程序提供的导航栏有时候满足不了需求，这时就需要去掉默认导航栏，然后自己做一个，或者写成公共组件。

微信小程序（原生）——去掉原生导航栏

努力、拼搏、奋进

11-10

1818

微信小程序（原声）——去掉原生导航栏

微信小程序：去除自带顶部导航栏

彭世瑜的博客

07-09

6270

app.json 全局设置 "window": { "navigationStyle": "custom", } page.json 局部设置 "navigationStyle": "custom",

微信小程序中关闭默认的 `navigationBar`，并使用自定义的 `nav-bar` 组件

小丁的博客

10-25

1496

nav-barnav-barnav-bar通过上述步骤，你可以在微信小程序中成功关闭默认的并使用自定义的nav-bar组件。这种方法使你能够对导航栏的样式和功能进行更高的自定义，以满足你的需求。

现成组件，详细教程：Uniapp去除微信小程序顶部导航栏，但保留标题和返回按钮；组件经多次调优，近乎完美

ChuanyangChen的博客

09-26

6263

这篇文章是在微信小程序原生开发的基础上设计的，但是最近又做到了Uni-app的项目，好巧不巧又得适配小程序端，顶部这个导航栏就有得折腾了。好在之前在原生上折腾过一次，这篇文章就整理一下Uni-app上如何去除这个默认样式后，依旧显示标题和返回按钮。⭕️ 注意：这里我是利用Store去存放“状态栏高度”这个变量，如果你不想用Store，想直接用全局变量也是可以的。没记错的话Uniapp自带Store，不需要安装，只需要创建store文件夹，并编写index.js 文件。至此，组件的准备工作就结束啦。

微信小程序顶部导航栏可滑动并选中放大

10-15

微信小程序顶部导航栏可滑动并选中放大的知识点涉及了微信小程序前端开发中的几个关键技术点，包括wxss样式设计、wxml结构编写以及js逻辑处理。首先，关于顶部导航栏的设计，使用了微信小程序组件库中的`...

微信小程序tabBar使用

07-10

微信小程序的tabBar的使用。tabBar中的页面 onLoad 事件只触发一次，切换tab时当前页面触发 onHide事件。

微信小程序实现左侧滑动导航栏

10-16

微信小程序顶部栏图片随页面滚动渐变展示隐藏

04-18

小程序顶部通栏，展示图片，随着页面滚动，开始渐变展标题记及纯色吸顶样式主要使用了小程序中的scroll-view组件，通过滚动时触发 bindscroll和滚动到顶部 bindscrolltoupper改变顶部栏的样式效果动图效果及使用...

微信小程序导航栏跟随滑动效果的实现代码

10-17

总结来说，实现微信小程序导航栏跟随滑动效果的关键在于结合`wxml`、`wxss`和`js`三部分的工作。在`wxml`中定义布局结构和事件绑定，在`wxss`中设置样式，在`js`中处理逻辑并使用动画效果。通过监听滑动事件，动态...

uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢？或者怎样给顶部栏设置颜色？

南北极之间

12-24

1319

uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢？或者怎样给顶部栏设置颜色？uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢？或者怎样给顶部栏设置颜色？uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢？或者怎样给顶部栏设置颜色？uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢？或者怎样给顶部栏设置颜色？uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢？或者怎样给顶部栏设置颜色？uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢

微信小程序隐藏显示底部的tabbar

誓言不轻信，谎言不枉听

11-04

3513

1. 隐藏 wx.hideTabBar() 2.显示 wx.showTabBar()

微信小程序页面禁止滑动

辽辽无期的博客

06-01

2416

【代码】微信小程序页面禁止滑动。

怎么去掉微信小程序自带的顶部标题？

m0_61629497的博客

12-19

2217

如下图所示怎么清除这个顶部导航？因为我是多端的小程序，所以用的uniapp开发的，接下来以uniapp为例；顶部导航栏即可去除，在微信小程序中也是如此。