小程序tab切換列表頁(基於mpvue)

tab切換列表

效果：


實現想法：

• 頭部tab使用div，fixed固定頭部；
• 下面內容使用的是swiper和swiper-item實現左右切換功能；
• 接着在swiper-item中使用scroll-view實現列表的滾動(設置y軸滾動)，滾動加載藉助scroll-view的scrolltolower方法；

tab切換邏輯：

• 設置一個參數接收當前tab的標識(tabIndex)；
• 這個tabIndex和swiper的current綁定，實現上面點擊的同時下面切換；
• swiper的change事件中同時也將當前swiper-item的標識回傳給tabIndex，實現下面拖動的同時改變上面tab；

注：
swiper的高度要設置一個值，當tab使用fixed時，百分百的設置方法在ios中會出現拖動不了，點擊不了；如果時不固定的情況下設置百分百的話，在Ios中會出現拖動到頁面底部在往上來一段距離後，頁面回彈(ios界面拖動效果)後，tab消失，需要拉到頂部後往下拉一段距離再次出現；爲了減少問題最直接的就是進入頁面時計算swiper的高度。

實現方法：
contentH爲計算高度式

<swiper
      class="swiper"
      :current="tabIndex"
      :style="'height:' + contentH"
      @change="pageChange">
      <!--  頁面內容 -->
      <swiper-item class="swiper-item">
      		<scroll-view
          		v-show="!noUsedNone"
          		@scrolltolower="loadNoUsed"
          		style="height: 100%; width: 100%"
          		scroll-y="true"
         		 scroll-x="false">
         		 頁面列表顯示區域
         	</scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
      		<scroll-view
          		v-show="!noUsedNone"
          		@scrolltolower="loadNoUsed"
          		style="height: 100%; width: 100%"
          		scroll-y="true"
         		 scroll-x="false">
         		 頁面列表顯示區域
         	</scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
      		<scroll-view
          		v-show="!noUsedNone"
          		@scrolltolower="loadNoUsed"
          		style="height: 100%; width: 100%"
          		scroll-y="true"
         		 scroll-x="false">
         		 頁面列表顯示區域
         	</scroll-view>
      </swiper-item>
 </swiper>

計算高度
tab使用
先獲取手機屏幕信息和tab的高度

let _this = this;
let res = wx.getSystemInfoSync();
let winH = res.windowHeight;
const query = wx.createSelectorQuery()
    query.select('.coupons-head').boundingClientRect() 
    query.exec(function (res) {
      console.log(res)
      console.log(res[0].height);
      let h = res[0].height;
      _this.scrollHeight = winH - h;       // tab使用fixed固定時  就不用減去h高度了
    })

computed: {
    contentH(){
      return this.scrollHeight + 'px';
    },
  },

tab切換邏輯：

<div class="coupons-head">
      <div class="tab-head">
        <div class="tab tab1" :class="{'active': tabIndex == 0}" data-id="0" @click="changeTab">
          未使用({{noUseNum}})
        </div>
        <div class="tab tab2" :class="{'active': tabIndex == 1}" data-id="1" @click="changeTab">已使用</div>
        <div class="tab tab3" :class="{'active': tabIndex == 2}" data-id="2" @click="changeTab">已過期</div>
      </div>
    </div>

** tab點擊方法：**

changeTab(e){
	this.tabIndex = e.currentTarget.dataset.id * 1;
}

** swiper-item拖動方法：**

pageChange(e){
	let _this = this;
	if ("touch" === e.mp.detail.source) {
        this.tabIndex = e.target.current;
    }
}

關鍵細節流程就是上面這些了，然後百分百的設置我這裏測試測出來的，我不確定是否是普遍性的；