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

微信小程序 swiper自适应高度

大概是这样子的,直接粘贴估计会报错，我是接了接口的，你们自己写点数据把

  
    
      
      
      
      
    
  
  
    
      已支付({{allpay.paid_count}})
      未支付({{allpay.un_paid_count}})
    
    
      
        
          --暂无订单--
          
            
              
                {{pay.order_kind}}：
                
                  {{pay.order_no}}
                  
                    ¥{{pay.price}}
                    
                  
                
                
                  车位支付
                  支付
                  {{pay.pay_time}}支付
                
                
              
            
          
        
      
      
      
        
          --暂无订单--
          
            
              订单号：
              
                {{unpay.order_no}}
                
                  ¥{{unpay.price}}
                
              
              
                {{unpay.order_kind}}
                继续支付
                支付失效
              
            
          
        
      
    
  

// pages/myOrder/myOrder.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentData: 0,
    allpay: {},
    paycount: [],
    unpaycount: [],
    orderdetail: {},
    searchvalue: '',
    order_nos: '',
    paytoPay: '',
    swiperheight: 0,
    paystate: 0


  },
  //列表
  getOrderList: function() {
    var params = {
      url:'' ,
      data: {
        uid: userUtils.getUid(),
      },
    }
    httpUtils.http(params).then(res => {
      console.log(res)
      var that = this;
      that.setData({
        allpay: res,
        paycount: res.paid_orders,
        unpaycount: res.un_paid_orders

      })
      console.log(1, this.data.unpaycount)
      for (var index in this.data.unpaycount) {
        if (this.data.unpaycount[index].paystatus == 2) {
          this.setData({
            paystate: 2
          })
        }
      }
      // 设置swiper高度
      if (this.data.paycount.length > this.data.unpaycount.length) {
        var heights = 252 * this.data.paycount.length + "rpx"
        this.setData({
          swiperheight: heights
        })
        console.log(this.data.swiperheight)
      } else if (this.data.paycount.length < this.data.unpaycount.length) {
        var heights = 252 * this.data.unpaycount.length + "rpx"
        this.setData({
          swiperheight: heights
        })
        console.log(this.data.swiperheight)
      } else {
        this.setData({
          swiperheight: 1000 + "rpx"
        })
      }
    }).catch(err => {})
  },

  //获取当前滑块的index
  bindchange: function(e) {
    const that = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  //点击切换，滑块index赋值
  checkCurrent: function(e) {
    const that = this;
    if (that.data.currentData === e.target.dataset.current) {
      return false;
    } else {
      this.getOrderList();
      that.setData({
        currentData: e.target.dataset.current
      })
    }
  },
  getInputValue: function(e) {
    
  },
  //搜索
  getsearch: function() {
   
  },
  toPay: function(event) {
   
  },
  //订单详情
  toPaydetail: function(event) {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    this.getOrderList();

    wx.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: '#B9A479'
    });
    wx.setNavigationBarTitle({
      title: '我的订单' //页面标题为路由参数
    })

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

/* pages/myOrder/myOrder.wxss */

.head-view {
  width: 100%;
  background-color: #eee;
}

.head-1 {
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.noorder {
  display: flex;
  color: #aaa;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  margin-top: 60rpx;
}

.input-view {
  width: 94%;
  align-items: center;
  margin: 16rpx 3%;
  padding: 10rpx 10rpx;
  border-radius: 10rpx;
  background-color: rgb(227, 227, 227);
}

.input {
  width: 80%;
  margin-left: 10rpx;
  color: #aaa;
  font-size: 30rpx;
}

.tab-view {
  border: 1rpx solid red;
  width: 100%;
}

.tab-item {
  justify-content: center;
  align-items: center;
}

.tab-text-y, .tab-text-n {
  color: #f06449;
}

.tab {
  float: left;
  width: 50%;
  text-align: center;
  padding: 25rpx 0;
  font-size: 30rpx;
  color: #999;
}

.topTabSwiper {
  background-color: #fff;
  zoom: 1;
}

.topTabSwiper:after {
  content: "";
  clear: both;
  display: block;
}

.tabBorer {
  border-bottom: 1px solid #f06449;
  color: #f06449;
}

.swipWarp {
  width: 100%;
  height: 100%;
  padding-bottom: 20rpx;
}

.swiper {
  width: 100%;
  height: 100%;
}

.imagesea {
  background-color: none;
  width: 30rpx;
  height: 30rpx;
}

.swiper_con {
  background-color: #fff;
  /* height: 190rpx; */
  margin-top: 31rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  margin-bottom: 11rpx;
}

.orderIdTit {
  width: 100%;
  font-size: 28rpx;
  color: #999;
  margin-bottom: 6rpx;
  margin-top: 20rpx;
}

.orderFlex {
  border-bottom: 1px solid rgb(227, 227, 227);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 9rpx;
}

.orderId {
  font-size: 30rpx;
  color: #999;
}

.orderMoney {
  display: flex;
  align-items: center;
}

.orderMoneyNum {
  margin-right: 31rpx;
  font-size: 36rpx;
  color: #f06449;
}

.orderMoneyNumno {
  font-size: 36rpx;
  color: #f06449;
}

.orderMoney image {
  width: 30rpx;
  height: 30rpx;
}

.orderTime {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 24rpx;
  color: #ccc;
  margin-top: 18rpx;
}

.orderPay {
  margin-top: 10rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.orderPay .orderparnum {
  width: 170rpx;
  height: 38rpx;
  line-height: 38rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ac9870;
  font-size: 24rpx;
  border-radius: 50rpx;
  background: #000;
}

.orderPaytits {
  width: 100%;
  font-size: 28rpx;
  color: #999;
  margin-bottom: 6rpx;
}

scroll-view {
  width: 100%;
  height: 93%; /*动态高度*/
}
.nopay{
  width: 170rpx;
  height: 38rpx;
  line-height: 38rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  border-radius: 50rpx;
  color: #fff;
  background: #999;
}