微信小程序自定义顶部导航栏

效果预览

代码片段

.wxml.代码

<view class="nav-header">
  <view wx:for="{{navs}}" wx:key='' class="nav-cell {{item.alias==activeNav?'active':''}}" bindtap="changeList" data-alias="{{item.alias}}">{{item.text}}</view>
</view>

.js.代码

Page({
  data: {
    activeNav: 'hot',
    navs: [{
      text: '热门商品',
      alias: 'hot'
    }, {
      text: '新品上市',
      alias: 'new'
    }]
  },
  changeList(e) {
    console.log(e.target.dataset.alias);
    const that = this;
    const alias = e.target.dataset.alias;

    if (alias !== this.data.activeNav) {
      this.setData({
        activeNav: e.target.dataset.alias,
        loading: true
      });
    }
  }
})

.wxss代码.

.nav-header {
  font-size: 28.12rpx;
  display: -webkit-box;
  text-align: center;
  background: #fff;
  padding: 0 16.41rpx;
  height: 100.77rpx;
  line-height: 100.77rpx;
}

.nav-cell {
  -webkit-box-flex: 1;
}

.nav-cell.active {
  color: #ff4b2d;
  border-bottom: #ff4b2d 4.69rpx solid;
}

完成效果

• 运行效果如上，界面内容再通过wx:if进行展示即可。