微信小程序商城订单上拉加载更点击切换订单状态（接口）
实现功能：如图
html （tab组件 需要的话请查看博客）
<Tab tabList="{{tabList}}" bindtabsItemChange="tabsItemChange"> <view class="order" wx:for="{{orderList}}" wx:for-index="index" wx:key="index"> <view class="order_content"> <view class="order_content_header" bindtap="toOrderDetail" data-index="{{index}}"> <view class="left"> 订单： <text>{{item.order_no}}</text> </view> <view class="right" wx:if="{{item.status==0}}">待支付</view> <view class="right" wx:if="{{item.status==1}}" style="color: #1F95DA;">待接单</view> <view class="right" wx:if="{{item.status==2}}" style="color: #1FDAC1;">进行中</view> <view class="right" wx:if="{{item.status==3}}" style="color: #1a1a1a;">已完成</view> <view class="right" wx:if="{{item.status==4}}" style="color: #999999;">已取消</view> <view class="right" wx:if="{{item.status==5}}">已拒单</view> <view class="right" wx:if="{{item.status==6}}">已退单</view> </view> <view class="order_item" bindtap="toOrderDetail" data-index="{{index}}"> <view class="order_item_left"> <view class="order_item_header">帮我取</view> <view class="order_item_content">{{item.product[0].pro_name}}</view> </view> <view class="red">￥{{item.money}}</view> </view> <view class="order_time"> <view class="flex"> <image src="../../static/icon/shijian.png" mode="widthFix" /> <view class="data"> {{item.createtime}} </view> </view> <view class="flex" wx:if="{{item.status==0}}"> <view class="quxiao"> 取消订单 </view> <view class="zhifu" bindtap="toOrderPay" data-index="{{index}}"> 立即支付 </view> </view> <view class="flex" wx:if="{{item.status==1}}"> <view class="quxiao"> 取消订单 </view> </view> </view> </view> </view> </Tab>
js（request组件是封装过的）
var app = getApp(); Page({ data: { orderList:'',//订单列表 tabList:[ //tab切换栏 { id:0, value:'全部订单', isActive:true }, { id:1, value:'待支付', isActive:false }, { id:2, value:'待接单', isActive:false }, { id:3, value:'进行中', isActive:false }, { id:4, value:'已完成', isActive:false }, { id:5, value:'已取消', isActive:false }, ], page: 1,//当前页码 status:'99',//订单状态 （后台约定，99显示全部订单，0：待支付 1：待接单 2：进行中 3：已完成 4：已取消） hasMoreData:false,//下拉判断是否还有数据 },// 根据标题索引来激活选中 标题数组 changeTitleByIndex(index){ let {tabList}=this.data tabList.forEach((v,i) => i===index? v.isActive = true:v.isActive = false); this.setData({ tabList }) }, tabsItemChange(e){ // 1 获取被点击的标题索引 const {index}=e.detail//获取索引 this.changeTitleByIndex(index) if (index==0) { this.setData({ status:'99' }) } if (index==1) { this.setData({ status:'0' }) } if (index==2) { this.setData({ status:'1' }) } if (index==3) { this.setData({ status:'2' }) } if (index==4) { this.setData({ status:'3' }) } if (index==5) { this.setData({ status:'4' }) } this.data.page=1 //当tab切换时当前页码变为1 this.tabOrderList(this.data.status); //调用tabOrderList方法 this.data.status为tab切换对应的订单状态 }, //跳转到订单详情页 toOrderDetail(e){ // console.log(e.currentTarget.dataset.index); let {index}=e.currentTarget.dataset let orderDetail = JSON.stringify(this.data.orderList[index]) wx.navigateTo({ url: '/pages/orderDetail/orderDetail?orderDetail='+orderDetail }) },
//页面加载 onShow:function(e) { this.data.page=1 this.tabOrderList(this.data.status); },
tabOrderList(){ wx.showLoading({ title: '加载中', }); let url = app.globalData.URL + 'api接口'; let data ={ status:this.data.status,//传给后台的订单状态 page:this.data.page //传给后台当前页面的页码 } app.wxRequest('POST', url, data, (res) => { if (res.code==1) { wx.hideLoading(); this.setData({ orderList:res.data //将后台拿到的订单列表赋值给data }) }else{ wx.showToast({ title: res.msg, icon: 'none', }); } }, (err) => { console.log(err) }) },
//下拉加载更多 onReachBottom:function(){ this.data.hasMoreData=true; if (this.data.hasMoreData) { wx.showLoading({ title: '加载中', }); let url = app.globalData.URL + 'api接口';//这两个接口用改是一样的本人调用了两次 let data ={ status:this.data.status, //同上 page:this.data.page } app.wxRequest('POST', url, data, (res) => { console.log(res); if (res.code==1) { if (res.data.length>0) {//判断获取到的数据长度>0再次请求数据直到请求到的数据长度<0证明没有数据 wx.hideLoading(); if (this.data.page == 1) { //清空数组 this.data.orderList= [] } this.setData({ orderList:this.data.orderList.concat(res.data),//旧数组和新获取的数组进行拼接 hasMoreData:true,//改为true证明它还有下一页 page:this.data.page+1//当前页码加一 }) }else{ this.setData({ orderList:this.data.orderList.concat(res.data),//没有更多数据，也要进行拼接数组的操作 }) wx.showToast({ title: '没有更多数据了', icon: 'success', }); } }else{ wx.showToast({ title: res.msg, icon: 'none', }); } }, (err) => { console.log(err) }) } } })
如果要实现下拉刷新功能自己添加就好
tab组件翻一翻博客吧
css代码就不贴出来了 ，要是有需要的评论处见
request请求是自己封装的有需要封装的也评论处见吧
