小程序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;
    }
}

关键细节流程就是上面这些了，然后百分百的设置我这里测试测出来的，我不确定是否是普遍性的；