⼩程序选项卡、列表动态显⽰按钮
⼩程序选项卡功能实现
wxml页⾯：
先给选项卡赋值data-current=“待确认”添加点击事件bindtap=“clickTab”，在js⾥clickTab获取选项卡的值，e.target.dataset.current通过that.setData赋值给currentTab，在wxml 选项卡class⾥进⾏判断{{currentTab==‘待确认’?‘active’:’’}}，通过 js 调⽤接⼝赋值来判断选项卡列表状态。
因为swiper⾼度是固定的，所以⽤到style=‘height:{{scrollHeight}}px’ bindchange=“swiperTab”，在js onLoad⽅法⾥通过this.setData 设置⾼scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100)
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab=='待确认'?'active':''}}" data-current="待确认" bindtap="clickTab">待确认 </view>
<view class="swiper-tab-item {{currentTab=='运输中'?'active':''}}" data-current="运输中" bindtap="clickTab">运输中 </view>
<view class="swiper-tab-item {{currentTab=='待结算'?'active':''}}" data-current="待结算" bindtap="clickTab">待结算 </view>
<view class="swiper-tab-item {{currentTab=='已完成'?'active':''}}" data-current="已完成" bindtap="clickTab">已完成 </view>
<view class="swiper-tab-item {{currentTab=='已取消'?'active':''}}" data-current="已取消" bindtap="clickTab">已取消 </view>
</view>
<swiper current='{{currentTab}}' style='height:{{scrollHeight}}px' duration="300" bindchange="swiperTab">
<!-- 待确认 -->
//在这⾥我设置了禁⽌滑动（catchtouchmove='stopTouchMove'）
<swiper-item catchtouchmove='stopTouchMove'><scroll-view scroll-y style='height:{{scrollHeight}}px' ><view class="main" wx:for='{{myReceive}}' wx:k ey="item">
<view data-order-no="{{derNo}}" bindtap="clickOrder">
<view class="main-item">
<view class="flex-row th">发单⼈:</view>
<view class="flex-row td2">{{item.publisherName}}</view>
<view class="flex-row th1">箱型:</view>
<view class="flex-row td1" >{{item.boxType}}</view>
</view>
<view class="main-item">
<view class="flex-row th">业务类型:</view>
<view class="flex-row td">{{item.businessType}}</view>
<view class="flex-row th1">箱重:</view>
<view class="flex-row td1">{{item.weight}}</view>
</view>
<view class="main-item">
<view class="flex-row th">到⼚时间:</view>
<view class="flex-row td">{{item.limitedAt}}</view>
<view class="flex-row th1">港区:</view>
<view class="flex-row td1">{{item.harbour}}</view>
</view>
<view class="main-item">
<view class="flex-row th">门点地址:</view>
<view class="flex-row td">{{item.store}}</view>
<view class="flex-row th1">提箱:</view>
<view class="flex-row td1">{{item.fetchAddress}}</view>
</view>
<view class="main-item">
<view class="flex-row th">备注:</view>
<view class="flex-row td" >{{item.state}}</view>
<view class="flex-row th1">运费:</view>
<view class="flex-row td1" >{{item.freight}}</view>
</view> </view>
<view class='main_solid'></view>
<view class="main_button">
<button>{{item.payType== 'online' ? '平台垫付' : '线下结算'}}</button>
<button>{{item.cargoType=="import"?'进⼝':'出⼝'}}</button>
<button>不含提箱费</button>
</view>
</view>
<view class='button1'><button wx:if="{{currentTab =='待确认'}}">待确认</button>
<button style='background-color: #43cf7c;' wx:elif="{{currentTab =='运输中'&& item.sealBoxNo==null}}" data-order-no="{{derNo}}" bindtap='click Seal'>报箱封号</button>
<button style='background-color: #43cf7c;' wx:elif="{{currentTab =='运输中'&&iverPrepay==null}}" data-order-no="{{derNo}}" bindtap= 'clickPrepay'>垫款</button>
<button style='background-color: #43cf7c;' wx:elif="{{currentTab =='运输中'&&item.signImg==null}}" data-order-no="{{derNo}}" bindtap='clickRe ceipt'>回单</button>
<button style='background-color: #43cf7c;' wx:elif="{{currentTab =='运输中'&&item.signImg!==null&&ansitCompleteFlg !==1}}" data-order-no="{{ derNo}}" bindtap='completed' >已完成</button>
<button class='completed' wx:elif="{{currentTab =='运输中'&&ansitCompleteFlg==1}}" data-order-no="{{derNo}}" >已完成</button>
<button style='background-color: #43cf7c;' wx:elif="{{currentTab =='待结算'&&item.withdrawState===null}}" data-order-no="{{derNo}}" bindtap= 'requestWithdraw'>待结算</button><button wx:elif="{{currentTab =='待结算'&&item.withdrawState=='待审核'}}">待审核</button>
</view>
<view class="img" data-phone="{{item.publisherPhone}}" bindtap='phoneCall'><image style='width:48rpx;height:48rpx' src='../../images/phone.png'></ image></view>
</view>
<view wx:if="{{pageEnd==true}}" class='scrollEnd'>已显⽰所有数据...</view>
</scroll-view>
</swiper-item>
</swiper>
wxss页⾯：
/* 选项卡样式 */
.swiper-tab{
width: 99%;
border: 1rpx solid #01C2AB;
border-radius: 8rpx;
text-align: center;
height: 58rpx;
line-height: 58rpx;
font-weight: bold;
background-color: #ffffff;
margin-top: 10rpx;
}
.swiper-tab-item{
display: table-cell;
width: 10%;
font-size: 29.16rpx;
text-align: center;
color:#01C2AB;
}
.swiper-tab-item:not(:last-child){border-right: 4rpx solid #01C2AB;}
.swiper-tab-item.active{
background-color: #01C2AB;
color: white;
}
/* 列表数据样式 */
.main{
position: relative;
width:92%;
height: 320rpx;
top: 10rpx;
padding: 20rpx;
color: rgba(80, 80, 80, 1);
background-color: rgba(255, 255, 255, 1);
font-size: 28.08rpx;
justify-content: center;
align-items: stretch;
margin-top: 10rpx;
margin: 0px auto;
overflow: hidden;
transition: left 0.2s ease-in-out;
white-space:nowrap;
text-overflow:ellipsis;
text-overflow:ellipsis;
z-index: 5;
}
/* 订单内容样式 */
.main-item{
width: 750rpx;
height: 55.52rpx;
}
.th{
text-align: left;
margin-right: 40rpx;
position: absolute;
left:25rpx;
}
.td{
position: absolute;
left:160rpx;
}
.td2{
position: absolute;
left:160rpx;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width: 200rpx;
}
.th1{
position: absolute;
right:29%;
}
.td1{
position: absolute;
left:540rpx;
}
.main_solid{
position: absolute;
width:100%;
height: 2.34rpx;
top: 290rpx;
right: 2rpx;
color: #999999;
background-color:#999999; line-height: 150%;
text-align: center;
}
.main_button{
width: 854.1rpx;
height: 40rpx;
display: flex;
flex-direction: row;
margin-top: 15rpx;
margin-left: 2rpx;
}
/* 按钮样式 */
.
main_button button{
height: 41rpx;
font-size: 28.08rpx;
padding: 4rpx;
line-height: 86%;
color: #ff5733;
border:2rpx solid #ff5733; background-color:white; border-radius: 0px;
margin: 5rpx;
}
.main_button button::after {
.main_button button::after {
border: 0px
}
.button1,.button2{
width: 200rpx;
position: relative;
top: -38rpx;
right: -480rpx;
height: 42rpx;
display: flex;
}
.button1 button,.button2 button{
font-size: 28.08rpx;
line-height: 150%;
border-radius: 20rpx;
}
.button1 button{
background-color: rgb(238, 241, 239);
}
.button2 button{
background-color: #01C2AB;
}
/* 电话图标 */
.
img{
width: 42rpx;
position: relative;
top: -370rpx;
right: -350rpx;
}
.scrollEnd{
margin: 0px auto;
font-size: 28rpx;
color: #999999;
margin-top: 20rpx;
text-align: center
}
js页⾯：
var tool = require('../../utils/util.js'); //引⼊的js var api = require('../../utils/api.js');
var baseUrl = '../../';
Page({
/**
* 页⾯的初始数据
*/
data: {
currentTab: '待确认',
isactive: true,
scrollHeight: 0,
myReceive:[],
size: 10,
pageEnd: false
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
var that = this;
var myReceive ={
state: '待确认',
page: '1',
size: '10'
}
}
//调⽤接⼝
var datas = res.data.data.items;
for (let i = 0; i < datas.length; i++) {
datas[i]["limitedAt"] = Date(datas[i]["limitedAt"])
datas[i]["createdAt"] = DateDiff(datas[i]["createdAt"])
}
that.setData({
myReceive: datas
})
})
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function () {
},
/**
* ⽣命周期函数--监听页⾯显⽰
htmlborder*/
onShow: function () {
this.setData({
scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100), })
var that = this;
var myReceive = {
state: this.data.currentTab, //选项卡所选值
page: '1',
size: '10'
}
var datas = res.data.data.items;
for (let i = 0; i < datas.length; i++) {
datas[i]["limitedAt"] = Date(datas[i]["limitedAt"])
datas[i]["createdAt"] = DateDiff(datas[i]["createdAt"])
}
that.setData({
myReceive: datas
})
})
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function () {
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function () {
},
/**
* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页⾯上拉触底事件的处理函数
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论