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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wangzongyang1025_/article/details/86484925

在这里插入图片描述
如上图点击的时候它上面的导航会切换到对应标题页面,这是一个页面,我们跳转的是一个页面
下面来段代码:
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 : '') + '商铺列表'
      })
  },

展开阅读全文

没有更多推荐了,返回首页