开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情
接着上一篇文章，继续总结此小程序项目实现的简单功能。
1. tab切换功能
主要由tab栏和展示内容的模块组成，tab栏展示几种不同的状态（订单的状态：全部、已预订、已退订、已完成），点击切换tab栏的状态，下面的内容就展示当前的状态下的数据（订单列表）
a. tab栏使用三元表达式判断status（订单状态值） == num（设置的状态值） 是否为真，如果为真，动态添加active类名，改变当前tab样式。
b. 并且给每个tab设置自定义属性传入当前num的值，在绑定的点击事件中，得到当前的num值，改变data中设置的status状态值，并重新请求订单列表数据
<view class="tabbar">
<view class="item {{status == '0' ? 'active' : ''}}" bindtap="onChange" data-id="0">全部
<text wx:if="{{totalNum}}">({{totalNum}})</text>
</view>
<view class="item {{status == '1' ? 'active' : ''}}" bindtap="onChange" data-id="1">已预订</view>
<view class="item {{status == '3' ? 'active' : ''}}" bindtap="onChange" data-id="3">已退订</view>
<view class="item {{status == '2' ? 'active' : ''}}" bindtap="onChange" data-id="2">已完成</view>
</view>
<view class="order-lists">
<view class="container">
<navigator wx:for="{{orderLists}}" wx:key="index" class="list" url="/pages/orderdetail/orderdetail?order={{item.order_no}}" hover-class="none">
...
</navigator>
<view class="nodata" wx:if="{{orderLists.length == 0}}">暂无数据</view>
</view>
<image class="some-bg" src="/assets/images/order-bg.png" mode="aspectFill"></image>
</view>
initData() {
this.setData({
page: 0,
listStatus: 1,
orderLists: [],
})
this.getOrderData()
},
onChange(e){
let status = e.currentTarget.dataset.id;
this.setData({
status
})
this.initData()
},
注：
- 因为每次点击切换tab，都需要把之前请求的订单列表数据清空，因此设置了一个专门的函数
initData实现数据清除之后，再实现数据请求 - 如果订单列表数据为空（也就是设置的这个数据变量长度为0），可以在内容区域显示‘暂无数据’
2.上拉加载功能
根据微信小程序官方提供的监听用户上拉触底事件
onReachBottom实现，它会在页面滚动到底部的时候自动触发。可以在
app.json的window选项中或页面配置中设置触发距离onReachBottomDistance
a. 上拉加载数据，其实是分页加载数据。在data中设置当前数据页数page: 0和数据的状态listStatus：1（根据这个状态控制是否请求数据，这里设置两种状态， 1：加载、 -1：没有数据了）。
b. 在请求数据函数中，首先判断listStatus是否为-1，如果为真，直接return出去，不请求数据了。
c. 每次请求数据都要增加一页数据页数，当数据页数等于请求数据的最后一页，就改变listStatus为-1，并且使用扩展运算符...合并每次请求的数据。
d. 在上拉触底事件onReachBottom中，执行请求数据的函数
getOrderData(){
if (this.data.listStatus == -1) {
return false;
}
let page = ++this.data.page
$api.orderLists({
page,
status:this.data.status
})
.then(res => {
console.log(res)
if (page == res.data.last_page) {
this.data.listStatus = -1
}
const orderLists = [...this.data.orderLists, ...res.data.data]
this.setData({ orderLists, page })
})
.catch(err => {
if (err.code == 202) {
wx.showToast({
icon: 'none',
title: err.msg
})
}
})
},
onReachBottom (){
this.getOrderData()
},
