微信小程序 滚动选项卡 swiper高度自适应

最近做小程序的时候遇到了swiper高度的问题,swiper里面的内容可以根据数据来自适应高度。那就给scroll-view计算一下高度
wxml


	
	
		
			
				{{item.text}}
			
		
	
	
	
		
			
				
					{{item.name}}
				
				
					卡号:{{item.time}}
				
				
					
						{{item.list}}
					
				
			
        
     

js中

data:{
	 // tab切换
    currentTab: 0,
    // 
    nav: [{
        text: '首页'
      },
      {
        text: '我的'
      },
      {
        text: '发布'
      },
      {
        text: '职场'
      },
      {
        text: '育儿'
      },
      {
        text: '纠纷'
      },
    ],
    cons: [{
        name: "纪念卡",
        time: "2018-12-04 ",
        list: "首页",
      },
      {
        name: "张三",
        time: "2018-12-04 12:00",
        ren: "我的",
      },
      {
        name: "张三",
        time: "2018-12-04 12:00",
        list: "发布",
      },
      {
        name: "张三",
        time: "2018-12-04 12:00",
        list: "情感",
      },
      {
        name: "张三",
        time: "2018-12-04 12:00",
        list: "纠纷",
      },
    ],
    height: 0,
    widHeight: 0,
    navs: 0
}

// 滚动列表
  switch(e) {
   var that = this
    var cur = e.currentTarget.dataset.current;
    var width = this.data.windowWidth / 5;                
    that .setData({
      navs: (cur - 2) * width 
    })
    if (that .data.currentTab == cur) {
      return false;
    } else {
      that .setData({
        currentTab: cur
      })
    }
  },
  switchTab(e) {
    var cur = e.detail.current;
    var width = this.data.windowWidth / 5;
    this.setData({
      currentTab: cur,
      navs: (cur - 2) * width 
    });
  },

在onLond或者onShow中

//获取swiper高度 
    var query = wx.createSelectorQuery();
    var that = this;
    var conents= this.data.cons.length;
    query.select('.payment').boundingClientRect(function (rect) {
      that.setData({
        height: rect.height,
        widHeight: rect.height * conents+ "px"
      })
    }).exec();
  },
  swiperTab: function (e) {
    var that = this
    var current=e.detail.current
    var heights = this.data.height;
    var conents= this.data.cons.length
    that.setData({
      currentTab: current
    });
    if (this.data.currentTab == 0) {
      that.setData({
        widHeight: heights * conents+ "px"
      });
    } 
  },

你可能感兴趣的:(微信小程序 滚动选项卡 swiper高度自适应)