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
}