动态设置小程序顶部或者头部的标题栏内容

最新推荐文章于 2023-09-26 22:02:45 发布

转载最新推荐文章于 2023-09-26 22:02:45 发布 · 886 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuhuang/p/9963582.html

本文介绍如何在微信小程序中通过三个关键步骤实现导航栏标题的动态设置：使用name属性的input标签输入标题，利用formType=submit的button提交表单，最后调用setNavigationBarTitle方法更新导航栏标题。

三步：

1. name属性非常重要

<input class="weui-input" type="text" placeholder="请输入页面标题并点击设置即可" name="title"></input>

2. formType="submit" 属性非常重要

<button type="primary" formType="submit">设置</button>

3 setNaivgationBarTitle 方法很重要

  setNaivgationBarTitle: function (e) {
    console.log(e.detail.value) //获取当前表单提交的内容title
    var title = e.detail.value.title
    console.log(title)
    wx.setNavigationBarTitle({
      title: title,
      success: function() {
        console.log('setNavigationBarTitle success')
      },
      fail: function(err) {
        console.log('setNavigationBarTitle fail, err is', err)
      }
    })

    return false
  }