小程序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为计算高度式

      
      
      		
         		 页面列表显示区域
         	
      
      
      		
         		 页面列表显示区域
         	
      
      
      		
         		 页面列表显示区域
         	
      
 

计算高度
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切换逻辑：

      

        

          未使用({{noUseNum}})
        
        
已使用
        
已过期
      
    

** 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;
    }
}

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