微信小程序动态修改顶部标题setNavigationBarTitle无需自定义

先看一下效果吧

我们先简单说一下流程

从父级携带多参跳转,子页接收该参数并动态修改顶部标题

实现代码

父级

wxml

  
    
      
      
      {{item.title}}
    
  

父级主要是data-index=""{{}}传参的

这里css就不说,我们今天主要是页面跳转携带多参并接收参数动态修改顶部标题

重要代码 js

chooseSort: function(e) {
    var index = e.currentTarget.dataset.index;
    var postname = e.currentTarget.dataset.postname;
    if(index == 0) {
      wx.navigateTo({
        url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
      })
    }
    if (index == 1) {
      wx.navigateTo({
        url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
      })
    }
    if (index == 2) {
      wx.navigateTo({
        url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
      })
    }
    if (index == 3) {
      wx.navigateTo({
        url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
      })
    }
    if (index == 4) {
      wx.navigateTo({
        url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
      })
    }
    if (index == 5) {
      wx.navigateTo({
        url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
      })
    }
  },

 这里我为什么写这么多的判断,这是根据索引判断点击的那个分类,

这里我们也可以优化一下

chooseSort: function(e) {
    var index = e.currentTarget.dataset.index;
    var postname = e.currentTarget.dataset.postname;
    wx.navigateTo({
       url: '../../book/book-classify-list/index?postId=' + index + '&postName=' + postname,
    })
  },

第一种方法比较笨拙,如果数据过多,你就会头疼死

 第二种方法比较灵活,不管你有多少数据,一句代码搞定

子页面

wxml

  
    
    
      
        {{item.title}}
        
      
      [{{item.status}}]{{item.introduce}}
      
        
          
          {{item.author}}
        
        
          {{item.category}}
        
      
    
  

主要代码 js

data: {
    postName: "",
},
// 动态修改顶部标题
dynamicStateTitle: function() {
    wx.setNavigationBarTitle({
      title: this.postName
    })
},

/**
 * 生命周期函数--监听页面加载
*/
onLoad: function(options) {
    var postName = options.postName;
    this.postName = postName;
    this.dynamicStateTitle();
},

这里在onLoad接收参数,在data中定义一个postName空变量,将接收的参数赋值给它,在父级点击的时候在子页面触发dynamicStateTitle函数

微信小程序刚进来的时候优先执行onLoad,所以在onLoad调用dynamicStateTitle函数

如有更好的方法,希望下方留言,共同学习,一起进步, 学无止境