小程序上拉加载分页功能

最新推荐文章于 2024-07-17 10:58:00 发布

qq_25723035

最新推荐文章于 2024-07-17 10:58:00 发布

阅读量180

点赞数

分类专栏：小程序开发

本文链接：https://blog.csdn.net/qq_25723035/article/details/109851677

版权

小程序开发专栏收录该内容

5 篇文章 1 订阅

订阅专栏

js代码

Page({    
  data: {
    toastMessage: "",
    toastStatus: "",
    list: [],
    nowPage: 0,
    forbid: false
  },
  onShow: function () {
    this.setData({ nowPage: 0, list: [] });
    this.nextPage();
  },
  nextPage: function () {//下一页
    if (!this.data.forbid) {
      this.setData({ forbid: true });
      request.get("XXXXXXX.do", { nowPage: this.data.nowPage }).then(res => {
        if (res.flag == 0) {

          let data = res.results;
          let nowPage = this.data.nowPage;
          let list = this.data.list;
          if (data.length > 0) {
            nowPage++;
          } else {
            if (list.length != 0)//不是第一次
              wx.showToast({ title: "已经后一页了", icon: 'none' });
            setTimeout(() => {
              this.setData({ forbid: false });
            }, 3000);
            return;
          }
         
          this.setData({ list: list, nowPage: nowPage, forbid: false });
        } else if (res.flag == 100) {
          wx.redirectTo({ url: 'XXXXX' });
        } else {
          toast.danger(this, res.message);
          this.setData({ forbid: false });
        }
      }).catch(e => {
        this.setData({ forbid: false });
      });
    }
  }
})

wxml代码

<view class="container">
  <scroll-view scroll-y enable-back-to-top lower-threshold="10" bindscrolltolower="nextPage" class="list">
    <button wx:for="{{list}}" wx:key="item"  data-orderisn="{{item.orderIsn}}">
      <view class="row row1">    
        <text>{{item.createDateStr}}</text>
        <text>
          <block wx:if="{{item.orderStatus == 0}}">进行中</block>
          <block wx:elif="{{item.orderStatus == 1}}">等待支付</block> 
          <block wx:else>已完成</block>
        </text>
      </view>
      <view class="row row2">
        <text>骑行时间:{{item.totalMinute}}分钟</text>
        <text>{{item.realPay}}元</text>
      </view>
      <view class="row row3">
        <text>订单号:{{item.orderIsn}}</text>
      </view>
    </button>
    <view wx:if="{{list.length == 0}}" class="empty">
      <image src="/image/order-empty.svg" mode="aspectFit"  />
    </view>
  </scroll-view>
</view>
<view class="toast {{toastStatus}}">
  <text>{{toastMessage}}</text>
</view>

css代码

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
  background-color: #F2F2F2;
}
.empty{
  width: 100%;
  text-align: center;
}
.empty image{
  width: 45%;
}
button{
  border-radius: 0;
}
button::after{
  border: 0;
}
button.button-hover{
  background-color: #E4E4E4 !important;
}
.list{
  height: 100%;
  padding-top: 4rpx;
}
.list button{
  width: 100%;
  height: 250rpx;
  background-color: #fff;
  margin-top: 16rpx;
  padding: 30rpx;
  font-size: 95%;
  display: flex;
  flex-direction: column;
}
.list button .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}
.list button .row2{
  font-size: 90%;
  color: #757575;
}
.list button .row3{
  font-size: 90%;
  color: #757575;
}