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

最新推荐文章于 2024-09-02 15:16:15 发布

青衫折扇

最新推荐文章于 2024-09-02 15:16:15 发布

阅读量7.6k

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_42543264/article/details/105684613

版权

小程序专栏收录该内容

91 篇文章

订阅专栏

先看一下效果吧

我们先简单说一下流程

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

实现代码

父级

wxml

<view class="classify-list">
  <view class="classify" wx:for="{{classifyList}}" wx:key="index">
    <view data-index="{{index}}" bindtap="chooseSort" data-postname="{{item.title}}">
      <view><image src="{{item.img}}"></image></view>
      <view class="mask"></view>
      <view class="classify-title">{{item.title}}</view>
    </view>
  </view>
</view>

父级主要是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

<view class="hot-list">
  <view class="books" wx:for="{{hotList}}" wx:key="index">
    <image src="{{item.img}}"></image>
    <view class="books-right">
      <view class="books-title">
        <view>{{item.title}}</view>
        <!-- <view>{{index + 1}}</view> -->
      </view>
      <view class="books-introduce">[{{item.status}}]{{item.introduce}}</view>
      <view class="book-B">
        <view>
          <image src="{{iconUser808080}}"></image>
          <view>{{item.author}}</view>
        </view>
        <view>
          <text>{{item.category}}</text>
        </view>
      </view>
    </view>
  </view>
</view>

主要代码 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函数

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