微信小程序点击分类标题导航也跟着改变成当前分类的标题

最新推荐文章于 2024-12-25 14:16:41 发布

阅读量2.8k

点赞数 2

分类专栏：微信小程序文章标签： wx.setNavigationBarTitle

微信小程序专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种在小程序中实现页面间导航并动态设置标题的方法，通过使用swiper组件展示轮播图，并结合navigator组件进行页面跳转，同时利用setNavigationBarTitle方法根据传入的参数动态设置页面标题。

在这里插入图片描述
如上图点击的时候它上面的导航会切换到对应标题页面，这是一个页面，我们跳转的是一个页面
下面来段代码：
html

<!--pages/tab/tab.wxml-->
<swiper class='item-swiper' indicator-dots="true" autoplay="true" interval="5000" duration="1000" indicator-color="white" indicator-active-color="#ccc">
  <block wx:for="{{imgUrls}}" wx:key="">
    <swiper-item>
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>
<view class='item-nav'>
  <block wx:for="{{tabBar}}" wx:key="{{item.navId}}">
  <!-- 我跳转的是我的另一个详情页，我们需要把JS中的navName拿过来  在这里我的navId拿的是当前数组的索引值 你也可以拿JS中的navId 但是需要修改 因为另一个页面根据的是索引值查找内容，如果不改的话会出现bug，后面我会给大家指出来-->
  <navigator class='item-nav-link' url='../index/index?navId={{index}}&&navName={{item.navName}}' hover-class="none">
    <image src='{{item.imgUrls}}'></image>
 </navigator>
   </block>
</view>

样式：

/* pages/tab/tab.wxss */
.item-swiper {
   height: 340rpx
}
.slide-image {
    width:750rpx;
    height: 100%; 
}
.item-nav {
   display: flex;
   padding:24rpx 0 29rpx 0;
}
.item-nav-link {
  flex: 1;
  display: flex;  //必须加上这个
  justify-content: center  //让里面的元素居中
}
.item-nav-link image {
   width: 128rpx;
   height: 140rpx;
}

最重要的是js：

// pages/tab/tab.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      '/image/banner1.png',
      '/image/banner2.png',
      '/image/banner3.png',
      '/image/banner4.png',
      '/image/banner5.png',
    ],
    tabBar:[
      {
        navId: '1',
        navName: '母婴品',
        imgUrls:'/image/icon_index_nav_1@2x.png',
      },
      {
        navId: '2',
        navName: '超市购',
        imgUrls: '/image/icon_index_nav_2@2x.png',
      },
      {
        navId: '3',
        navName: '秒杀拍',
        imgUrls: '/image/icon_index_nav_3@2x.png',
      },
      {
        navId: '4',
        navName: '分类',
        imgUrls: '/image/icon_index_nav_4@2x.png',
      },

    ],
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
                                                                                        
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

现在主页的代码已经完了，我们看分页的代码：

 <image src='/image/banner1.png' style='width:100%' mode='widthFix'></image>
  <view>{{listContent}}</view>
  <!-- 在这里我只拿了一个图片作为内容 -->

最重要的JS文件：

data: {
  list:[
       {
        listContent:'母婴品'
     },
       {
         listContent: '超市购'
       },
       {
         listContent: '秒杀拍'
       },
       {
         listContent: '分类'
       },
     ]
}

 onLoad: function (options) {
      console.log(options)
      // 这个是navigator传过来的navId 通过get的方式 
      let navId = options.navId
      console.log(navId)
      // 通过data中list的索引值查询相应的内容
      // this.data.list[navId] 这个[]中的是那数组的索引值查询的数据
    let listContent = this.data.list[navId].listContent
    console.log(listContent)
      this.setData({
        navId: navId,
        listContent:listContent
      })
      // 这个就是本文章的重点 通过这个setNavigationBarTitle方法 去设置它的title
     // 这个三元表达式如果我们闯过来的值不等于空就拿过来这个值用，如果等于空了 就是默认的商品列表
      wx.setNavigationBarTitle({
        title: (options.navName != '' ? options.navName : '') + '商铺列表'
      })
  },