在实际项目中,经常会遇到点击切换不同内容的情况,尤其是个人中心的订单页,还要同时实现滚动分页效果。
效果如下:
<view class="tabNav"> <view wx:for="{{navTab}}" wx:key="index" data-idx="{{index}}" bindtap="currentTab" class="{{currentTab==index ? ‘cur‘ : ‘‘}}"><text>{{item}}</text></view> </view> <view class="orderInfo"> <view class="orderInfo-item" wx:for="{{sendList}}" wx:key="index"> 这是内容{{item.content}} </view> </view>
.tabNav{z-index: 4; position: fixed; top:0;left:0; width:100%; height:80rpx; line-height: 80rpx; background: #fff; display: flex; padding:0 30rpx; border-bottom:1px solid #f5f5f5; box-sizing: border-box; } .tabNav> view{text-align: center; margin-right:50rpx;} .tabNav> view:last-child{ margin-right: 0;} .tabNav> view text{padding:0 15rpx; height:75rpx; display:inline-block;} .tabNav .cur text{ border-bottom:5rpx solid #36ccf9; color:#000;}
import cfg from ‘../../utils/config.js‘; import util from ‘../../utils/util.js‘; var app = getApp(); Page({ /** * 页面的初始数据 */ data: { navTab: [‘全部订单‘,‘待付款‘,‘待发货‘, ‘待收货‘], currentTab: 0, sendList:[], }, select: { page: 1, size: 6, isEnd: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getData() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { this.getData() }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, currentTab: function (e) { if (this.data.currentTab == e.currentTarget.dataset.idx){ return; } this.setData({ currentTab: e.currentTarget.dataset.idx }) this.select={ page: 1, size: 6, isEnd: false } this.data.sendList=[]; this.getData() }, getData:function(){ var _this=this; if (this.select.isEnd){ return } var type = this.data.currentTab == 0 ? ‘ALL‘ : this.data.currentTab == 1 ? ‘WAIT_DELIVER‘ : ‘DELIVER‘; util.request(`你的接口地址,后面的是参数` + type + `/` + this.select.page + `/` + this.select.size, {}, ‘GET‘, function (res) { var content = res.data.data; _this.setData({ sendList: (_this.data.sendList).concat(content) }) if (content.length>0){ _this.select.page++ }else{ _this.select.isEnd=true } }) }, })
每次切换tab,要把原本的数据清空,重置select,防止分页时出现数据混乱的情况,发出请求时,根据现在的currentTab值,去对应的设定type值,请求不同的接口。