导航栏
作者：beatzcs 链接：https://www.jianshu.com/p/c681007a6287
这个导航虽然已经很完善了,不过还是要根据自己的来进行修改的
tabs.wxml
代码语言：javascript复制 <!-- 顶部TabList -->
<view wx:if="{{tab_config.fixed}}" class="tab-bar">
<view wx:for="{{tab_config.tabs}}" wx:key="unique" data-index="{{index}}" bindtap="handlerTabTap" class="tab {{tab_config.active_tab==index?'tab-active':''}} " style="width: {{tab_config.item_width}}px;">
<text>{{item}}</text>
</view>
<view style="width: {{tab_config.item_width-tab_config.underline.margins}}px; left: {{tab_config.underline.offset}}px;" class="under-line withAnimate"></view>
</view>
<scroll-view wx:else class="tab-bar" scroll-x="true" bindscroll="onScroll" style="width: 100%;" scroll-left="{{tab_config.tab_left}}">
<view wx:for="{{tab_config.tabs}}" wx:key="unique" data-index="{{index}}" bindtap="handlerTabTap" class="tab {{tab_config.active_tab==index?'tab-active':''}} " style="width: {{tab_config.item_width}}px;">
<text>{{item}}</text>
</view>
<view style="width: {{tab_config.item_width-tab_config.underline.margins}}px; left: {{tab_config.underline.offset 10}}px;" class="under-line withAnimate"></view>
</scroll-view>
<!-- 滑动页面 -->
<swiper class='swiper' bindchange='bindChange' current='{{swipe_config.current}}' indicator-dots='{{swipe_config.indicator_dots}}' autoplay='{{swipe_config.autoplay}}'>
<block wx:for="{{orderList}}" wx:for-item='orders'>
<swiper-item class='swiper-item'>
<!-- 页面内容 -->
</swiper-item>
</block>
</swiper>tabs.wxss
代码语言：javascript复制/* 顶部TabList */
.withAnimate {
transition: all 200ms ease-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
.tab-bar {
position: relative;
white-space: nowrap;
display: block;
font-size: 11pt;
color: #666;
height: 40px;
background: #fff;
}
.tab-bar .tab {
display: inline-block;
line-height: 40px;
text-align: center;
}
.tab-bar .tab-active {
color: #e64340;
}
.tab-bar .under-line {
position: absolute;
height: 2px;
top: 38px;
background-color: #e64340;
}
.tabs.js
代码语言：javascript复制data: {
tabTouch: false, //tab点击会触发swiper的滚动，会导致调用两次相同的服务，使用此tag来阻止swiper调用服务，只是切换page
window_width: wx.getSystemInfoSync().windowWidth || 375,// 单位是px
tab_config: {
tabs: ['全部', '待付款', '待发货', '待收货', '已完成', '已退款', '已取消'],// tabs
fixed: false, // tabbar是否固定宽度
active_tab: 0, //当前激活的tab
item_width: 70,// 单位是px
tab_left: 0, // 如果tabbar不是固定宽度，则目前左移的位置
underline: {
offset: 0, //下划线的位移
margins: 20, //下划线的左右间距
}
},
swipe_config: {
indicator_dots: false, // 不显示小圆点
autoplay: false,// 自动切换
interval: 2000,// 自动切换频率
duration: 500, // 切换时间
current: 0 // 当前激活的panel
}
//...
},
/**
* 更换页面到指定page ，从0开始
*/
updateSelectedPage(page) {
let that = this;
//console.log("========== updateSelectedPage" page);
let { window_width, tab_config, swipe_config } = this.data;
let underline_offset = tab_config.item_width * page;
tab_config.active_tab = page;
swipe_config.current = page;
tab_config.underline.offset = underline_offset;
if (!tab_config.fixed) {
// 如果tab不是固定的 就要 检测tab是否被遮挡
let show_item_num = Math.round(window_width / tab_config.item_width); // 一个界面完整显示的tab item个数
let min_left_item = tab_config.item_width * (page - show_item_num 1); // 最小scroll-left
let max_left_item = tab_config.item_width * page; // 最大scroll-left
if (tab_config.tab_left < min_left_item || tab_config.tab_left > max_left_item) {
// 如果被遮挡，则要移到当前元素居中位置
tab_config.tab_left = max_left_item - (window_width - tab_config.item_width) / 2;
}
}
that.setData({
"tab_config": tab_config,
"swipe_config": swipe_config
});
//调用页面的接口更新页面
that.loadOrderList(page);
},
/**
* tab的点击事件
*/
handlerTabTap(e) {
this.setData({
tabTouch: true
})
this.updateSelectedPage(e.currentTarget.dataset.index);
},
/**
* swiper的滑动事件
*/
bindChange(e) {
if (!this.data.tabTouch) {
// console.log("===== swiperChange " e.detail.current);
this.updateSelectedPage(e.detail.current);
}
}
