这里只为实现个简单好用的顶部导航栏，重点是为了好看，因为小程序它本身没有啊！！
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.简单又紧张刺激的学习就到此为止
休息
