六不准的微信小程序之如何创建一个Tabs

最近用微信小程序做了一个网络图片文件夹,里面用了一些官方提供的接口和组件,自己也实现了一些官方组件之外的小功能。

比如本文将介绍移动端布局中比较常用的Tabs布局是如何实现的。

需求

  • 图片文件夹界面Tabs作为布局的导航。
  • 每个Tab选中,其内容区块将展示该Tab的内容。
  • Tab选中有明显的高亮展示。

实现方式

  • 总体:navigator组件 结合 获取url参数 来实现该功能。
  • wxml布局:
1
2
3
4
5
<view class="tabs">
<navigator redirect class="tab {{currentType == 'latest' ? 'tab-selected' : ''}}" url="gif?type=latest" hover-class="tab-hover">最新</navigator>
<navigator redirect class="tab {{currentType == 'gif' ? 'tab-selected' : ''}}" url="gif?type=gif" hover-class="tab-hover">动图</navigator>
<navigator redirect class="tab {{currentType == 'static' ? 'tab-selected' : ''}}" url="gif?type=static" hover-class="tab-hover">趣图</navigator>
</view>
  • wxss样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.tabs {
display: flex;
position: relative;
background-color: #fff;
}
.tabs .tab {
flex: 1;
text-align: center;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
color: #000;
height: 84rpx;
line-height: 84rpx;
box-sizing: border-box;
}
.tabs .tab-hover,
.tabs .tab-selected {
color: #1aad19;
border-bottom: 2px solid #1aad19;
}
  • javascript:
1
2
3
4
5
6
//获取url中type参数,若没有该参数,默认显示最新tab
onLoad: function(option){
this.setData({
currentType: option.type ? option.type : 'latest',
})
}

页面效果

  • wechat-tabs