微信小程序实现顶部导航菜单效果

效果图： 

实现代码如下：

index.wxml:

<!-- 切换栏 -->
<view class="swiper-tab">
  <block wx:for="{{swipertab}}" wx:key="sptab">
    <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" data-current="{{item.index}}" bindtap="tabSwitch">{{item.name}}</view>
  </block>
</view>

<swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px" bindchange="tabChange">
  <!-- 全部 -->
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{items}}" wx:key="" bind:tap="toOrderDetail" data-id="{{item._id}}">
        <view class=" orderListTitle">
          <text class="userName">{{item.object+" 估价："+(item.guessPrice !== undefined ? item.guessPrice : '')+"元"}}</text>
        </view>
        <view class="orderListDetails">
          <view class="productInfo">
            <view class="productTitle">取货方式:{{item.chooseWay}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
  <!-- 待回收-->
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{waitPayOrder}}" wx:key=" " bind:tap="toOrderDetail" data-id="{{item._id}}">
        <view class="orderListTitle">
          <text class="userName">{{item.object+" 估价："+(item.guessPrice !== undefined ? item.guessPrice : '')+"元"}}</text>
        </view>
        <view class="orderListDetails">
          <view class="productInfo">
            <view class="productTitle">取货方式:{{item.chooseWay}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
  <!-- 已完成 -->
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{lostOrder}}" wx:key=" " bind:tap="toOrderDetail" data-id="{{item._id}}">
        <view class="orderListTitle">
          <text class="userName">{{item.object+" 估价："+(item.guessPrice !== undefined ? item.guessPrice : '')+"元"}}</text>
        </view>
        <view class="orderListDetails">
          <view class="productInfo">
            <view class="productTitle">取货方式:{{item.chooseWay}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
</swiper>

 index.wxss:

/*切换栏*/
.swiper-tab {
  height: 40px;
  line-height: 40px;
  background: #f5f5f5 ;
  color: #3B3B3B;
  display: flex;
  position: relative;
  z-index: 2;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* border-bottom:1px solid black; */
}
 
.swiper-tab-list {
  margin: 0 30px;
  padding: 0 4px;
  font-size: 15px;
}
 
.on {
  border-bottom:2px solid #3B3B3B;
  color: #3B3B3B;
}
 
.navTopList {
  display: flex;
  width: 100%;
  height: 70rpx;
  background: #fff;
  border-bottom: 1rpx solid #BEBEBE	;
  margin-top:5px;
}
 
.navTopList .order-info {
  text-align: center;
}
 
.navTopList .order-info view {
  width: 56rpx;
  height: 56rpx;
  margin-left: 31rpx;
}
 
.navTopList .order-info text {
  font-size: 34rpx;
}
 
.navTopList .order-info text.active {
  color: #ff6662;
}
 
.navTopList .ywc,.navTopList .dfk,.navTopList .yqx {
  flex: 1;
}
 
 
/*订单列表*/
.orderDetails {
  background: #fff;
  border-bottom: 20rpx solid #f5f5f5;
}
 
.orderListTitle {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #BEBEBE;
}
 
.orderListTitle .userName {
  padding-right: 50rpx;
  margin-left:10px;
}
 
.orderListTitle .orderStatus {
  float: right;
  margin-right: 20rpx;
  color: #2f7b27;
  font-size: 34rpx;
}
 
.orderListDetails {
  display: flex;
  height: 100rpx;
  border-bottom: 1rpx solid #f3f3f3;
}
 
.orderListDetails .productImg {
  flex: 1;
  height:180rpx;
  width:120px;
  margin-top: 20rpx;
  margin-left: 20rpx;
}
 
.orderListDetails .productImg image {
  width: 100px;
  height: 90%;
}
 
.orderListDetails .productInfo {
  flex: 4;
  margin: 40rpx 10px 20px 30rpx;
  font-size:15px;
 
}
 
.orderListDetails .productInfo .productTitle {
  font-size:15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom:10px;
}
 
.productCount {
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #f3f3f3;
}
 
.productCount>view {
  float: right;
  margin-right: 30rpx;
}

index.js:

const app = getApp();
const db = wx.cloud.database();
const openid = app.globalData.openid;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currtab: 0,
    swipertab: [ {
      name: '全部',
      index: 0
    }, {
      name: '待回收',
      index: 1
    },
    {
      name: '已完成',
      index: 2
    }
  ],
    items: [],
    item2: [],
    item1: [],
    item0: [],
    status: ['预约已取消',
      '预约成功',
      '预约完成'
    ],
    openid: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:async function (options) {
    
  },
    /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if (openid) {
      db.collection('orders').where({
        _openid:openid
      }).get({
        success: res => {
          console.log("orders=="+res.data[4]._id);
          this.setData({
            items: res.data.reverse(),
            // 直接在这里设置数据到页面，省去orderShow中的处理
            waitPayOrder: res.data.filter(item => item.status === 1).reverse(),
            lostOrder: res.data.filter(item => item.status === 0).reverse(),
          });
        },
        fail: err => {
          console.log(err);
        }
      }) 
    }else{
      wx.showToast({ title: '请先登录呦', icon: 'none' });
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 页面渲染完成
    this.getDeviceInfo()
  },
  toOrderDetail:function(e){
    let orderId = e.currentTarget.dataset.id;
    console.log("orderId=="+orderId);
    wx.navigateTo({
      url: '/pages/orderShow/index?orderId='+orderId
    });
  },
  getDeviceInfo: function () {
    let that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          deviceW: res.windowWidth,
          deviceH: res.windowHeight
        })
      }
    })
  },

  /**
   * @Explain：选项卡点击切换
   */
  tabSwitch: function (e) {
    var that = this
    if (this.data.currtab === e.target.dataset.current) {
      return false
    } else {
      that.setData({
        currtab: e.target.dataset.current
      })
    }
  },

  tabChange: function (e) {
    this.setData({
      currtab: e.detail.current
    })
    console.log("currtab=="+this.data.currtab);
  }
})

 能看懂代码的兄弟们直接粘贴代码即可，如果还有一些疑惑的话，下面我给大家梳理一下实现逻辑：

<view class="swiper-tab">
  <block wx:for="{{swipertab}}" wx:key="sptab">
    <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" data-current="{{item.index}}" bindtap="tabSwitch">{{item.name}}</view>
  </block>
</view>

首先是通过上面的代码，把顶部导航菜单栏的那三种状态遍历出来，然后通过tabSwitch（）方法把data-current的属性值传到js部分，

  tabSwitch: function (e) {
    var that = this
    if (this.data.currtab === e.target.dataset.current) {
      return false
    } else {
      that.setData({
        currtab: e.target.dataset.current
      })
    }
  },

如果发现当前的currtab值和传过来的值相同，那么不做任何处理；若不同，那么把传过来的值赋值给currtab，

class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" 

 那么无论点击与否，最后都会实现currtab == item.index，从而在当前的盒子里加上on里面的样式

<swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px" bindchange="tabChange">

当currtab发生变化的时候就会触发tabChange（）函数，

  tabChange: function (e) {
    this.setData({
      currtab: e.detail.current
    })
    console.log("currtab=="+this.data.currtab);
  }

把current的值重新赋值给currtab,从而下面的内容就展示成对应的<swiper-item>的内容。快去实现这个实用的效果吧，如果对你有帮助的话，点赞收藏起来吧，方便下次查阅使用喔