寫點東西記錄一下美好時光，上周學習了一下通過mpuve開發微信小程序，看完文檔，就準備擼起袖子加油幹的時候，一開始就被支持手勢滑動的導航欄給搞懵逼了。求助一波百度和谷歌未果後，只能自己動腦動手！為了給像我一樣的小菜鳥，提供一下思路，就記錄一下吧！可以優化的地方，請大神不吝賜教。

1.mpvue是什麽？
額，這個還是直接看文檔：mpvue 官方站點

2.效果預覽
不耽誤大神時間，沒什麽亮點，直接上效果圖，有興趣再往下看吧！一切從簡。簡陋的demo.

3.實戰過程

創建示例項目

vue init mpvue/mpvue-quickstart slidebar

先來實現一個TabBar吧,思路和我們平時web

寫Tab頁是一樣，監聽點擊事件，來回切換。css3動畫效果來實現底部滾動條的來回切換。

修改pages/index/index.vue中template：

<template>
  <div>
    <div class="navbar">
      <block v-for="(item,index) in tabs" :key="index">
        <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
          <div class="navbar_title">{{item.name}}</div>
        </div>
      </block>
      <div class="navbar_slider" :class="navbarSliderClass"></div>
    </div>
    <div>
      <div :hidden="activeIndex != 0">選項一的內容</div>
      <div :hidden="activeIndex != 1">選項二的內容</div>
      <div :hidden="activeIndex != 2">選項三的內容</div>
    </div>
  </div>
</template>
 

修改pages/index/index.vue中script：

<script>
export default {
  data() {
    return {
      tabs: [
        {
          name: "選項卡1",
          type: "1",
          checked: true
        },
        {
          name: "選項卡2",
          type: "2",
          checked: true
        },
        {
          name: "選項卡3",
          type: "3",
          checked: true
        }
      ],
      activeIndex: 0,
    };
  },
  computed: {
    navbarSliderClass() {
      if (this.activeIndex == 0) {
        return "navbar_slider_0";
      }
      if (this.activeIndex == 1) {
        return "navbar_slider_1";
      }
      if (this.activeIndex == 2) {
        return "navbar_slider_2";
      }
    },
  },
  methods: {
    tabClick(e) {
      this.activeIndex = e.currentTarget.id;
    }
  },
};
</script>
 

添加樣式：

<style scoped>
.content {
  box-sizing: border-box;
  height: 100%;
  padding-top: 50px;
  /* overflow: auto; */
  -webkit-overflow-scrolling: touch;
}

.swiper-item {
  height: 100%;
  text-align: center;
}

.navbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: fixed;
  z-index: 500;
  top: 0;
  height: 50px;
  width: 100%;
  background-color: #298de5;
  border-bottom: 1rpx solid #ccc;
}

.navbar_item {
  position: relative;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  padding: 13px 0;
  text-align: center;
  font-size: 0;
}

.navbar_item .navbar_item_on {
  color: white;
}

.navbar_title {
  color: white;
  font-weight: 500;
  display: inline-block;
  font-size: 15px;
  max-width: 8em;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.navbar_slider {
  position: absolute;
  content: " ";
  left: 0;
  bottom: 0;
  width: 6em;
  height: 3px;
  background-color: white;
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
}

.navbar_slider_0 {
  left: 29rpx;
  transform: translateX(0);
}

.navbar_slider_1 {
  left: 29rpx;
  transform: translateX(250rpx);
}

.navbar_slider_2 {
  left: 29rpx;
  transform: translateX(500rpx);
}
.controls {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: fixed;
  z-index: 8888;
  top: 80;
  height: 50px;
  width: 100%;
  background-color: #298de5;
}
</style>

樣式是從mp-vue提取出來的，通過tabClick()方法動態更改當前tabbar選中值，然後通過navbarSliderClass()的滑動底部的滾動條。來看下效果吧！

給Tabbar添加手勢滑動，接下來改造一下吧，添加手勢滑動效果，需要借助小程序的swiper組件來實現。

修改pages/index/index.Vue下的template:

<template>
  <div>
    <div class="navbar">
      <block v-for="(item,index) in tabs" :key="index">
        <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
          <div class="navbar_title">{{item.name}}</div>
        </div>
      </block>
      <div class="navbar_slider" :class="navbarSliderClass"></div>
    </div>
    <swiper class="content" :duration="50" :style="'height:'+contentHeight" @change="swiperChange" :current="currentTab" @animationfinish="onAnimationfinish">
        <swiper-item  v-for="(item,index) in tabs" :key="index">
          <div>{{item.name}}</div>
        </swiper-item>
      </swiper>
  </div>
</template>

修改Script:

<script>
export default {
  data() {
    return {
      tabs: [
        {
          name: "選項卡1",
          type: "1",
          checked: true
        },
        {
          name: "選項卡2",
          type: "2",
          checked: true
        },
        {
          name: "選項卡3",
          type: "3",
          checked: true
        }
      ],
      activeIndex: 0,
      currentTab: 0,
      winWidth: 0,
      winHeight: 0,
    };
  },
  computed: {
    navbarSliderClass() {
      if (this.activeIndex == 0) {
        return "navbar_slider_0";
      }
      if (this.activeIndex == 1) {
        return "navbar_slider_1";
      }
      if (this.activeIndex == 2) {
        return "navbar_slider_2";
      }
    },
    contentHeight() {
      return this.winHeight + "px";
    }
  },
  methods: {
    tabClick(e) {
      this.activeIndex = e.currentTarget.id;
      this.currentTab =this.activeIndex;
    },
    swiperChange(e) {
      this.currentTab = e.mp.detail.current;
      this.activeIndex = this.currentTab;
    },
    onAnimationfinish() {
      console.log("滑動完成.....")
    }
  },
  onLoad() {
    var res = wx.getSystemInfoSync();
    this.winWidth = res.windowWidth;
    this.winHeight = res.windowHeight;
  }
};
</script>

好了，到這裏就全部完成了。註意swiper組件必須給他設置一個固定高度，不可以使用height:100%之類的。可以在swiper裏嵌套scroll-view實現列表.不過長列表左右滑動有卡頓，暫未知道該如何優化。

mpvue實戰-手勢滑動導航欄