1、頁面

<view class="navbar"><lable wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">//item在js文件里面定義數組 <text>{{item}}</text></lable> </view>

2、js 里面的data數據

data: {// 頂部菜單切換navbar: ['全部', '代付款', "代發貨", "待收貨", "已完成"],// 默認選中菜單index: 0,currentTab:0,listArray:[],//顯示的訂單showOrderList:[],//獲取的訂單},

3、把所有訂單請求下來

//查詢所有訂單_selectByUserIdNormal(id) {//此請求方法是封裝的，也可以用request直接請求數據selectByUserIdNormal(id).then(res => {console.log(res);this.setData({listArray : res.data.data,showOrderList:res.data.data})}).catch(err => {console.log(err);})},

4、處理點擊事件

//頂部tab切換navbarTap: function (e) {console.log(e.currentTarget.dataset.idx);var that = this;that.setData({currentTab: e.currentTarget.dataset.idx})if(that.data.currentTab === 0){console.log("回到全部");console.log(that.data.showOrderList);that.setData({listArray : that.data.showOrderList})}else{let listArray = []for (let i = 0; i < that.data.showOrderList.length; i++) {if (that.data.showOrderList[i].status == that.data.currentTab) {console.log("篩選數據")listArray.push(that.data.showOrderList[i]);}}that.setData({listArray: listArray})} }

完整js

// components/ordercpn/ordercpn.js import {selectByUserIdNormal } from "/../../utils/networkutils/order.js" Component({/*** 組件的屬性列表*/properties: {innerTitle:{type:String,value:""},isShowSearch:{type: String,value: ""}},/*** 組件的初始數據*/data: {// 頂部菜單切換navbar: ['全部', '代付款', "代發貨", "待收貨", "已完成"],// 默認選中菜單index: 0,pick_name: "",currentTab:0,listArray:[],//顯示的訂單showOrderList:[],//獲取的訂單},// 初始化加載created: function () {var that = this;wx.getStorage({key: 'userinfo',success: function (res) {console.log(res.data);if (res.data) {that.setData({isLogin: true,list: res.data})} else {that.setData({isLogin: false})}that.setData({userid: res.data.id})var userid = res.data.id;that._selectByUserIdNormal(userid);}, fail: function (err) {}})},/*** 組件的方法列表*/methods: {//頂部tab切換navbarTap: function (e) {console.log(e.currentTarget.dataset.idx);var that = this;that.setData({currentTab: e.currentTarget.dataset.idx})if(that.data.currentTab === 0){console.log("回到全部");console.log(that.data.showOrderList);that.setData({listArray : that.data.showOrderList})}else{let listArray = []for (let i = 0; i < that.data.showOrderList.length; i++) {if (that.data.showOrderList[i].status == that.data.currentTab) {console.log("篩選數據")listArray.push(that.data.showOrderList[i]);}}that.setData({listArray: listArray})} },//查詢所有已支付的訂單并篩選出是拍賣的訂單_selectByUserIdNormal(id) {selectByUserIdNormal(id).then(res => {console.log(res);this.setData({listArray : res.data.data,showOrderList:res.data.data})}).catch(err => {console.log(err);})},} })

完整wxml

<!--components/ordercpn/ordercpn.wxml--> <!-- 頭部自定義導航 --><navigation innerTitle="{{innerTitle}}" isShowSearch="{{isShowSearch}}" /><!--導航條--> <view class="navbar"><lable wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap"><text>{{item}}</text></lable> </view> <!--全部--> <view hidden="{{currentTab!==0}}" class='total' style='background-color: #EBEBEB;'><view wx:if="{{listArray.length>0}}"><!-- 外層 --><view class='cont_count' wx:for="{{listArray}}" wx:key="key"><!-- 編號 --><view class='seria'><label class='seriac_name'>訂單編號<text>{{item.orderNumber}}</text></label><!-- 訂單狀態 --><label class='seriac_start'>{{item.isPayment}}</label></view><!-- 列表 --><view class='list'><!-- 列表圖片 --><image class='list_img' src='{{item.goods.image}}'></image><!-- 列表標題 --><label class='list_name'>{{item.goods.name}}</label><!-- 列表價格 --><label class='list_money'>￥{{item.goods.price}}</label></view><!-- 計算 --><view class='count_eg'><!-- 居中 --><view class='count_cent'><!-- 共兩件商品 --><label class='cont_cent_name'>共{{item.number}}件商品</label><!-- 合計 --><lable class='cont_cen_money'><text class='cont_ce_mon'>合計:￥{{item.cost}}</text></lable></view></view><!-- 標簽功能 --><view class='coent_list'><!-- 取消訂單 --><label class='coent_del' data-index='{{index}}'>取消訂單</label><!-- 確認收貨 --><label class='coent_log_base' data-index='{{index}}'>確認收貨</label></view></view></view><!-- 否則 --><view wx:else><!-- 外層 --><view class='cont_count'><label class='none_tab'>親,您還暫未下單哦~~</label></view></view></view><view hidden="{{currentTab!==1}}" class='total' style='background-color: #EBEBEB;'><view wx:if="{{listArray.length>0}}"><!-- 外層 --><view class='cont_count' wx:for="{{listArray}}" wx:key="key"><!-- 編號 --><view class='seria'><label class='seriac_name'>訂單編號<text>{{item.orderNumber}}</text></label><!-- 訂單狀態 --><label class='seriac_start'>{{item.isPayment}}</label></view><!-- 列表 --><view class='list'><!-- 列表圖片 --><image class='list_img' src='{{item.goods.image}}'></image><!-- 列表標題 --><label class='list_name'>{{item.goods.name}}</label><!-- 列表價格 --><label class='list_money'>￥{{item.goods.price}}</label></view><!-- 計算 --><view class='count_eg'><!-- 居中 --><view class='count_cent'><!-- 共兩件商品 --><label class='cont_cent_name'>共{{item.number}}件商品</label><!-- 合計 --><lable class='cont_cen_money'><text class='cont_ce_mon'>合計:￥{{item.cost}}</text></lable></view></view><!-- 標簽功能 --><view class='coent_list'><!-- 取消訂單 --><label class='coent_del' data-index='{{index}}'>取消訂單</label><!-- 確認收貨 --><label class='coent_log_base' data-index='{{index}}'>確認收貨</label></view></view></view><!-- 否則 --><view wx:else><!-- 外層 --><view class='cont_count'><label class='none_tab'>親,您還暫未下單哦~~</label></view></view></view><view hidden="{{currentTab!==2}}" class='total' style='background-color: #EBEBEB;'><view wx:if="{{listArray.length>0}}"><!-- 外層 --><view class='cont_count' wx:for="{{listArray}}" wx:key="key"><!-- 編號 --><view class='seria'><label class='seriac_name'>訂單編號<text>{{item.orderNumber}}</text></label><!-- 訂單狀態 --><label class='seriac_start'>{{item.isPayment}}</label></view><!-- 列表 --><view class='list'><!-- 列表圖片 --><image class='list_img' src='{{item.goods.image}}'></image><!-- 列表標題 --><label class='list_name'>{{item.goods.name}}</label><!-- 列表價格 --><label class='list_money'>￥{{item.goods.price}}</label></view><!-- 計算 --><view class='count_eg'><!-- 居中 --><view class='count_cent'><!-- 共兩件商品 --><label class='cont_cent_name'>共{{item.number}}件商品</label><!-- 合計 --><lable class='cont_cen_money'><text class='cont_ce_mon'>合計:￥{{item.cost}}</text></lable></view></view><!-- 標簽功能 --><view class='coent_list'><!-- 取消訂單 --><label class='coent_del' data-index='{{index}}'>取消訂單</label><!-- 確認收貨 --><label class='coent_log_base' data-index='{{index}}'>確認收貨</label></view></view></view><!-- 否則 --><view wx:else><!-- 外層 --><view class='cont_count'><label class='none_tab'>親,您還暫未下單哦~~</label></view></view></view><view hidden="{{currentTab!==3}}" class='total' style='background-color: #EBEBEB;'><view wx:if="{{listArray.length>0}}"><!-- 外層 --><view class='cont_count' wx:for="{{listArray}}" wx:key="key"><!-- 編號 --><view class='seria'><label class='seriac_name'>訂單編號<text>{{item.orderNumber}}</text></label><!-- 訂單狀態 --><label class='seriac_start'>{{item.isPayment}}</label></view><!-- 列表 --><view class='list'><!-- 列表圖片 --><image class='list_img' src='{{item.goods.image}}'></image><!-- 列表標題 --><label class='list_name'>{{item.goods.name}}</label><!-- 列表價格 --><label class='list_money'>￥{{item.goods.price}}</label></view><!-- 計算 --><view class='count_eg'><!-- 居中 --><view class='count_cent'><!-- 共兩件商品 --><label class='cont_cent_name'>共{{item.number}}件商品</label><!-- 合計 --><lable class='cont_cen_money'><text class='cont_ce_mon'>合計:￥{{item.cost}}</text></lable></view></view><!-- 標簽功能 --><view class='coent_list'><!-- 取消訂單 --><label class='coent_del' data-index='{{index}}'>取消訂單</label><!-- 確認收貨 --><label class='coent_log_base' data-index='{{index}}'>確認收貨</label></view></view></view><!-- 否則 --><view wx:else><!-- 外層 --><view class='cont_count'><label class='none_tab'>親,您還暫未下單哦~~</label></view></view></view><view hidden="{{currentTab!==4}}" class='total' style='background-color: #EBEBEB;'><view wx:if="{{listArray.length>0}}"><!-- 外層 --><view class='cont_count' wx:for="{{listArray}}" wx:key="key"><!-- 編號 --><view class='seria'><label class='seriac_name'>訂單編號<text>{{item.orderNumber}}</text></label><!-- 訂單狀態 --><label class='seriac_start'>{{item.isPayment}}</label></view><!-- 列表 --><view class='list'><!-- 列表圖片 --><image class='list_img' src='{{item.goods.image}}'></image><!-- 列表標題 --><label class='list_name'>{{item.goods.name}}</label><!-- 列表價格 --><label class='list_money'>￥{{item.goods.price}}</label></view><!-- 計算 --><view class='count_eg'><!-- 居中 --><view class='count_cent'><!-- 共兩件商品 --><label class='cont_cent_name'>共{{item.number}}件商品</label><!-- 合計 --><lable class='cont_cen_money'><text class='cont_ce_mon'>合計:￥{{item.cost}}</text></lable></view></view><!-- 標簽功能 --><view class='coent_list'><!-- 取消訂單 --><label class='coent_del' data-index='{{index}}'>取消訂單</label><!-- 確認收貨 --><label class='coent_log_base' data-index='{{index}}'>確認收貨</label></view></view></view><!-- 否則 --><view wx:else><!-- 外層 --><view class='cont_count'><label class='none_tab'>親,您還暫未下單哦~~</label></view></view></view>

總結

以上是生活随笔為你收集整理的小程序tab选项卡请求我的订单数据筛选处理(待收货、代发货、已完成等)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。