微信小程序记录-实现顶部可切换导航栏

这里只为实现个简单好用的顶部导航栏，重点是为了好看，因为小程序它本身没有啊！！

1.首先就是效果图

效果先不管，好看总没错。

1.gif

2.关键的代码

.wxml

<!--index.wxml-->
<!--导航条-->
<view class="navbar">
  <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
<!--内容-->
<view wx:if="{{currentTab==0}}">
  <view class='info'>
    <image src='/img/icon.png'></image>
    <text>没有已关注</text>
  </view>
</view>

<view wx:elif="{{currentTab==1}}">
  <view class='info'>
    <image src='/img/icon.png'></image>
    <text >没有未关注</text>
  </view>
</view>

.wxss

/**index.wxss**/
page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.navbar{
  flex: none;
  display: flex;
  background: #fff;
  font-size: 30rpx;
  color: #bbbbbb;
}
.navbar .item{
  position: relative;
  flex: auto;
  text-align: center;
  line-height: 90rpx;
}
.navbar .item.active{
  color: #908df5;
}
.navbar .item.active:after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rpx;
  background: #908df5;
}
.info{
 display:flex;
 margin-top: 250rpx;
 justify-content: center;
 align-items:center;
 flex-direction: column;
}
.info image { 
  width:300rpx;
  height:300rpx;
}
.info text {
  margin-top: 10rpx;
  font-size: 30rpx;
  color: #908df5;
}

.js

//index.js
const app = getApp()
Page({
  data: {
    navbar: ['已关注', '未关注'],
    currentTab: 0,
  },
  //切换bar
  navbarTap: function (e) {
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
    //全局变量
    app.globalData.currentTab = e.currentTarget.dataset.idx;
  },
  onShow() {
    this.setData({
      currentTab: app.globalData.currentTab
    })
  },

})

3.说下值得注意的几个问题

1.由于wx.switchTab不能携带参数，如果需要使用在tabBar 页面，跳转至指定分页，配置currentTab在全局变量中，页面切换和页面跳转时操作currentTab达到效果。

//app.js
  globalData: {
    currentTab: 0
  }

2.需要更润滑的拖动切换效果，记得用swiper！

4.加入swiper，实现可拖拽切换的顶部导航栏

2.gif

.代码部分

.wxml

<!--index.wxml-->
<!--导航条-->
<view class="navbar">
  <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
<!--内容-->
<!-- <view wx:if="{{currentTab==0}}">
  <view class='info'>
    <image src='/img/icon.png'></image>
    <text>没有已关注</text>
  </view>
</view>

<view wx:elif="{{currentTab==1}}">
  <view class='info'>
    <image src='/img/icon.png'></image>
    <text>没有未关注</text>
  </view>
</view> -->

<swiper class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">
  <swiper-item>
    <view class='info'>
      <image src='/img/icon.png'></image>
      <text>没有未关注</text>
    </view>
  </swiper-item>
  <swiper-item>
    <view class='info'>
      <image src='/img/icon.png'></image>
      <text>没有未关注</text>
    </view>
  </swiper-item>
</swiper>

.wxss

/**index.wxss**/
page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.navbar{
  flex: none;
  display: flex;
  background: #fff;
  font-size: 30rpx;
  color: #bbbbbb;
}
.navbar .item{
  position: relative;
  flex: auto;
  text-align: center;
  line-height: 90rpx;
}
.navbar .item.active{
  color: #908df5;
}
.navbar .item.active:after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rpx;
  background: #908df5;
}
.swiper{
  height: 100%
}
.info{
 display:flex;
 margin-top: 250rpx;
 justify-content: center;
 align-items:center;
 flex-direction: column;
}
.info image { 
  width:300rpx;
  height:300rpx;
}
.info text {
  margin-top: 10rpx;
  font-size: 30rpx;
  color: #908df5;
}

.js

//index.js
const app = getApp()
Page({
  data: {
    navbar: ['已关注', '未关注'],
    currentTab: 0,
  },
  //切换bar
  navbarTap: function (e) {
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
    //全局变量
    app.globalData.currentTab = e.currentTarget.dataset.idx;
  },
  onShow() {
    this.setData({
      currentTab: app.globalData.currentTab
    })
  },

  swiperChange: function (e) {
    this.setData({
      currentTab: e.detail.current,
    })
    //全局变量
    app.globalData.currentTab = e.detail.current;
  },
})

5.简单又紧张刺激的学习就到此为止

休息