WeChat applet swiper adaptive height
It's probably like this. If you paste it directly, it will report an error. I connected the interface. Write some data yourself.
<view class="f-c head-view">
<view class="f-r head-1">
<view class="f-r input-view">
<image bindtap="getsearch" class="imagesea" src="/image/swiper/search.png"></image>
<!-- <input bindtap="getsearch" bindinput='getInputValue' class="input" placeholder="订单号等关键字"></input> -->
<input bindinput='getInputValue' class="input" placeholder="请输入订单号" placeholder-style="color:#aaa;"></input>
<!-- <view class="input">请输入订单号</view> -->
</view>
</view>
<view>
<view class='topTabSwiper'>
<view class='tab {
{currentData == 0 ? "tabBorer" : ""}}' data-current="0" bindtap='checkCurrent'>已支付({
{allpay.paid_count}})</view>
<view class='tab {
{currentData == 1 ? "tabBorer" : ""}}' data-current="1" bindtap='checkCurrent'>未支付({
{allpay.un_paid_count}})</view>
</view>
<swiper current="{
{currentData}}" style="height:{
{swiperheight}}" class='swiper' duration="300" bindchange="bindchange">
<swiper-item>
<scroll-view>
<view wx:if="{
{paycount==null || paycount=='' || paycount==undefind}}" class="noorder">--暂无订单--</view>
<view class='every'>
<view class='swiper_con' wx:for='{
{paycount}}' wx:for-item="pay">
<view class="swipWarp" bindtap="toPaydetail" data-order_no="{
{pay.order_no}}">
<view class="orderIdTit">{
{pay.order_kind}}：</view>
<view class="orderFlex">
<view class="orderId">{
{pay.order_no}}</view>
<view class="orderMoney">
<view class="orderMoneyNum">¥{
{pay.price}}</view>
<!-- <image src="/image/swiper/arrow.png"></image> -->
</view>
</view>
<view class="orderPay">
<view class="orderTime">车位支付</view>
<view class="orderTime" wx:if="{
{pay.pay_time==null}}">支付</view>
<view class="orderTime" wx:else>{
{pay.pay_time}}支付</view>
</view>
<!-- <view class="orderTime" >{
{pay.pay_time}}</view> -->
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<!-- 2 -->
<swiper-item>
<scroll-view>
<view wx:if="{
{unpaycount==null || unpaycount=='' || unpaycount==undefind}}" class="noorder">--暂无订单--</view>
<view class='swiper_con' wx:for='{
{unpaycount}}' wx:for-item="unpay">
<view class="swipWarp" bindtap="toPay" data-order_no="{
{unpay.order_no}}">
<view class="orderIdTit">订单号：</view>
<view class="orderFlex">
<view class="orderId">{
{unpay.order_no}}</view>
<view class="orderMoney">
<view class="orderMoneyNumno">¥{
{unpay.price}}</view>
</view>
</view>
<view class="orderPay">
<view class="orderPaytits">{
{unpay.order_kind}}</view>
<view wx:if="{
{paystate==0}}" class="orderparnum">继续支付</view>
<view wx:else class="nopay">支付失效</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>// 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;
}