微信小程序--动态设置导航栏颜色

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

既然要动态设置导航栏颜色,估计 自定义导航栏 也跑不了

关于动态设置导航栏颜色,微信小程序官方文档给出了一个API: wx.setNavigationBarColor

官方给出的示例:

wx.setNavigationBarColor({
  frontColor: '#ffffff',
  backgroundColor: '#ff0000',
  animation: {
    duration: 400,
    timingFunc: 'easeIn'
  }
})

我的实际使用:

    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#ffffff',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      },
      success: () => {
        console.log('设置成功')
      },
      fail: () => {
        console.log('设置失败')
      },
      complete: () => {
        console.log('设置结束')
      },
    })

需要注意的是:文章来源地址https://www.toymoban.com/news/detail-565039.html

  • frontColor只有两个选择:#ffffff #000000
  • frontColorbackgroundColor两个都需要设置

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

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

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

相关文章

  • 记录微信小程序使用Vant Weapp-Sidebar 侧边导航,更改它的边框颜色

    因为组件自带的颜色是红色,不符合项目的需求,直接用是这样的,如图: 但是在他的官方给出的参数中没有直接能变更颜色的参数,下面是它定义边框颜色的名字,我们只需要在自己的Wxss文件里重写一下这个class就可以了,代码如下: wxml文件: wxss文件: 现在运行就会是

    2024年02月13日
    浏览(58)
  • 微信小程序01-底部导航栏设置

    1 在app.json找到 pages,增加pages配置地址栏路径,保存后会自动生成相应文件夹; 2,增加  tabBar  参数,“selectedColor” 参数是设置选中后文字的颜色;\\\"list\\\" 中放置导航数据。      list 中 相关参数: pagePath ---- 指向地址                                   text   ---- 

    2024年02月12日
    浏览(46)
  • 微信小程序-获取设备信息,状态栏/导航栏/内容/tabBar高度设置

    效果展示  代码展示

    2024年02月11日
    浏览(63)
  • H5+微信小程序中顶部导航设置:app-plus

    首先uniapp代码在微信小程序和App、H5之间有时候是不兼容的,例如正常通过app-plus设置顶部导航,H5端是合适的 目的效果展示的结果:如图所示,我们需要实现这样的效果 顶部没有出现搜索的图标和消息的图标 https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview-searchinput 如图我

    2024年02月08日
    浏览(47)
  • 优雅实现微信小程序动态tabBar,根据不同用户角色显示不同底部导航

    背景 在开发小程序过程中,有个需求是,小程序底部的tabBar需要根据不同用户角色显示不同底部导航。此时就需要用到自定义底部导航 custom-tab-bar。 上次发文是组合显示4个底部tabBar导航,很多小伙伴评论说组合超过5个怎么办。他们的需求总数超过5个了。 现在我在这里更新

    2024年02月14日
    浏览(38)
  • 微信小程序可以通过wx.request()方法发送text/event-stream请求头的数据,并通过wx.onSocketMessage()方法动态接收数据

    具体步骤如下: 1. 使用wx.request()方法发送text/event-stream请求头的数据,示例代码如下: ``` wx.request({   url: \\\'your_url\\\',   header: {     \\\'Content-Type\\\': \\\'text/event-stream\\\'   },   success: function(res) {     console.log(res)   } }) ``` 2. 在页面onLoad()方法中创建WebSocket连接,示例代码如下: ``` onLoa

    2024年02月05日
    浏览(46)
  • 原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)

    本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 备注:  navigationStyle(导航栏样式),参数: default = 默认样式,custom = 自定义样式。  2.在页面.js文件onLoad生命

    2024年02月09日
    浏览(60)
  • 微信小程序设置动态变量设值

    微信小程序如何动态变量设值? 示例代码如下: // 二层数据情况

    2024年02月07日
    浏览(42)
  • 微信小程序js如何动态设置css

    微信小程序中可以使用setData()方法动态设置CSS样式。 例如,我们可以在wxml文件中定义一个样式类: ``` view class=\\\"my-class\\\"Hello World/view ``` 然后在js文件中使用setData()方法动态设置该样式类的CSS样式: ``` Page({   data: {     myClassStyle: \\\'\\\'   },   onLoad: function () {     this.setData({    

    2024年02月09日
    浏览(41)
  • 微信小程序动态设置tab-bar

    微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档 动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容 例如普通用户这里不显示赛事tab,特殊用户需要在进入小程序的时候显示赛事tab 实现方法 在custom-tab-bar组件中赋值给对应的lis

    2024年02月10日
    浏览(50)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包