微信小程序个别页面自定义导航栏

微信小程序个别页面自定义导航栏

个别页面自定义

之前看过很多有关微信小程序自定义导航栏的解决方案,虽然最终实现了自定义导航栏,但是存在的问题是只能对所有的小程序页面进行自定义,无法仅对小程序个别页面的导航栏进行自定义。

由于自己的小程序需要,无奈只好尝试只对个别页面进行自定义,所幸最终成功了,所以也在这里记录一下自己的方案:

1、我们并不需要在app.json文件中写下什么,让"navigationStyle"属性保持默认状态。

2、在找到自己需要加入自定义的页面所在目录之后,在目录中相应的.json文件中加入"navigationStyle": "custom"就好了。

如何自定义

作为一个小程序小白,对自定义导航栏一开始就是一无所知,看到自定义导航栏时心中只有大大的疑惑:不是说单页面只能对window属性进行配置吗?为什么还能对导航栏进行配置?

想了好久,才知道原来自定义导航栏依旧是只是对window属性进行配置,.json文件中的"navigationStyle": "custom"说是自定义,实则是将导航栏直接隐藏,从而window就可以占据原本属于导航栏的位置,然后我们就可以开开心心地在那原本属于导航栏的位置上设置一个个性导航栏。

具体注意

1、悬浮

为实现像导航栏那样不会随着界面的上下移动而移动,我们设置的导航栏需要能悬浮起来,实现方式:在.

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序中可以通过自定义导航栏实现更加个性化的界面设计。以下是一个简单的实现步骤: 1. 在 app.json 文件中设置 "navigationStyle": "custom",表示使用自定义导航栏。 2. 在页面的 WXML 文件中编写自定义导航栏的 HTML 代码,例如: ``` <view class="navbar"> <view class="navbar-title">自定义导航栏</view> </view> ``` 其中,navbar 表示导航栏的样式,navbar-title 表示标题的样式,可以根据需要进行自定义。 3. 在页面的 wxss 文件中设置导航栏的样式,例如: ``` .navbar { height: 44px; background-color: #fff; border-bottom: 1px solid #ccc; display: flex; align-items: center; justify-content: center; } .navbar-title { font-size: 18px; font-weight: bold; color: #000; } ``` 其中,height 表示导航栏的高度,background-color 表示导航栏的背景颜色,border-bottom 表示导航栏底部的边框线,display、align-items 和 justify-content 表示导航栏标题的布局方式,navbar-title 表示标题的样式,可以根据需要进行自定义。 4. 在页面的 JS 文件中设置导航栏的返回按钮,例如: ``` wx.showModal({ title: '提示', content: '确认返回上一页?', success: function (res) { if (res.confirm) { wx.navigateBack({ delta: 1 }) } } }) ``` 其中,wx.showModal 表示显示一个模态框,title 表示模态框的标题,content 表示模态框的内容,success 表示点击确定按钮后执行的回调函数,wx.navigateBack 表示返回上一页。 通过以上步骤,就可以实现微信小程序自定义导航栏
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值