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