小程序-导航栏完善版

上次的导航栏没能实现平移的动画效果，今天就来看一下加上平移动画的导航栏。
tabs.wxml

  <!--  顶部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

/*  顶部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

  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);
    }
  },

1.此tabBar可以设置是否为固定宽度，从而选择使用view横向填充还是使用scroll-view横向滚动
2.下划线平移的动画效果主要是靠wxss中的.withAnimate来实现，所以下划线也放弃了使用::after伪类来实现
3.tab点击事件会触发一次swiper的翻页事件，因此注意调用接口时重复调用

show time

tabs.gif

---

个人使用云开发的小程序"喃喃故事汇"已上线,欢迎查看效果.

搜索"喃喃故事汇".jpg