微信小程序选项卡、列表动态显示按钮

版权声明：Fang格子 https://blog.csdn.net/qq_41874847/article/details/84965717

小程序选项卡功能实现

---

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:key="item">
      <view data-order-no="{{item.orderNo}}"  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" style="color:red">{{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" style="left:140rpx">{{item.state}}</view>
          <view class="flex-row th1">运费:</view>
          <view class="flex-row td1" style="color:red">{{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 class='button1'><button wx:if="{{currentTab =='待确认'}}">待确认</button>
        <button style='background-color: #43cf7c;' wx:elif="{{currentTab =='运输中'&& item.sealBoxNo==null}}" data-order-no="{{item.orderNo}}" bindtap='clickSeal'>报箱封号</button>
         <button style='background-color: #43cf7c;' wx:elif="{{currentTab =='运输中'&&item.receiverPrepay==null}}" data-order-no="{{item.orderNo}}" bindtap='clickPrepay'>垫款</button>
         <button style='background-color: #43cf7c;' wx:elif="{{currentTab =='运输中'&&item.signImg==null}}" data-order-no="{{item.orderNo}}" bindtap='clickReceipt'>回单</button>
         <button style='background-color: #43cf7c;' wx:elif="{{currentTab =='运输中'&&item.signImg!==null&&item.transitCompleteFlg !==1}}" data-order-no="{{item.orderNo}}" bindtap='completed' >已完成</button>
          <button class='completed' wx:elif="{{currentTab =='运输中'&&item.transitCompleteFlg==1}}" data-order-no="{{item.orderNo}}" >已完成</button>
         <button style='background-color: #43cf7c;' wx:elif="{{currentTab =='待结算'&&item.withdrawState===null}}" data-order-no="{{item.orderNo}}" 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;
  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 {
  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'
    }
    //调用接口
   api.getRequest(api.apiUrl.ORDERS_ACCEPTED_GET,myReceive,function(res){
      var datas = res.data.data.items;
      for (let i = 0; i < datas.length; i++) {
        datas[i]["limitedAt"] = tool.toDate(datas[i]["limitedAt"])
        datas[i]["createdAt"] = tool.getDateDiff(datas[i]["createdAt"])
      }
      that.setData({
        myReceive: datas
      })
    })
  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  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'
    }
    api.getRequest(api.apiUrl.ORDERS_ACCEPTED_GET, myReceive, function (res) {
      var datas = res.data.data.items;
      for (let i = 0; i < datas.length; i++) {
        datas[i]["limitedAt"] = tool.toDate(datas[i]["limitedAt"])
        datas[i]["createdAt"] = tool.getDateDiff(datas[i]["createdAt"])
      }
      that.setData({
        myReceive: datas
      })
    })
  },

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

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

  },

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

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

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

  },
  //成功 
  showToast1() {
    wx.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 4000
    })
  },
  //选项卡点击切换
  clickTab: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
    console.log("ffffffffffffffff" + this.data.currentTab)
    var that = this;
    var myReceive = {
      state: this.data.currentTab,
      page: '1',
      size: '10'
    }
    api.getRequest(api.apiUrl.ORDERS_ACCEPTED_GET, myReceive, function (res) {
      var datas = res.data.data.items;
      console.log(datas)
      for (let i = 0; i < datas.length; i++) {
        datas[i]["limitedAt"] = tool.toDate(datas[i]["limitedAt"])
      }
      that.setData({
        myReceive: datas
      })
    })
  },
  //拨打电话
  phoneCall: function (e) {
    wx.makePhoneCall({
      phoneNumber: e.currentTarget.dataset.phone,
      success: function () {
        console.log("拨打电话")
      },
      fail:function(){
        console.log("拨打失败")
      }
    })
  },
  // 跳转详情
  clickOrder: function (event){
    var orderNo = event.currentTarget.dataset.orderNo;
    wx.navigateTo({
      url: baseUrl + api.pageUrl.ORDER_PAGE_URL + '?id=' + orderNo
    })
  },
  // 禁止滑动
  stopTouchMove: function () {
    return false;
  },
  // 跳转报箱封号
  clickSeal: function (event) {
    var orderNo = event.currentTarget.dataset.orderNo;
    wx.navigateTo({
      url: baseUrl + api.pageUrl.SEAL_PAGE_URL+'?id=' + orderNo
    })
  },
  // 跳转垫款
  clickPrepay: function (event){
    var orderNo = event.currentTarget.dataset.orderNo;
    wx.showModal({
      title: '提示',
      content: '无垫款费用或和发单方线下结算垫款费用请点击跳过！如输入垫款信息，费用将由平台连同运费一起垫付并收取平台管理费，请谨慎输入！',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
          wx.navigateTo({
            url: baseUrl + api.pageUrl.PREPAY_PAGE_URL+'?id=' + orderNo
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
  // 跳转回单
  clickReceipt: function (event) {
    var orderNo = event.currentTarget.dataset.orderNo;
    wx.navigateTo({
      url: baseUrl + api.pageUrl.RECEIPT_PAGE_URL+'?pid=' + orderNo
    })
  },
  // 已完成
  completed: function (event) {
    var that = this;
    var orderNo = event.currentTarget.dataset.orderNo;
    var completeData={
      orderNo:""
    }
    api.putRequest('/weChat/orders/' + orderNo + '/transitComplete.do', completeData, function(res){
      console.log(res.data)
      that.onShow()
    })
  },
  // 申请结算
  requestWithdraw: function (event) {
    var that = this;
    var orderNo = event.currentTarget.dataset.orderNo;
    api.putRequest('/weChat/orders/' + orderNo + '/requestWithdraw.do',orderNo,function(res){
      console.log(res.data)
    })
  }
})

也可以不用swiper来制作选项卡，可以直接给选项卡赋值，通过判断来显示，如果需要显示的值不一样也可以直接来判断显示。

---

动态显示按钮：

通过wx:if来判断显示,如果点击后马上更改状态，就需要添加点击事件，在js设置方法调用接口成功后调用==onLoad()或onShow()==方法刷新页面改变按钮状态值

---

拨打电话可参考api文档 [link]https://developers.weixin.qq.com/miniprogram/dev/api/wx.makePhoneCall.html.