微信小程序订单页面下拉刷新上拉分页加载

微信小程序开发交流qq群   581478349

   承接微信小程序开发。扫码加微信。

正文：

效果图：

 

代码：

json代码：

{
  "enablePullDownRefresh": true,
  "backgroundColor": "#19ad19"
}

js代码：

// pages/my_order/my_order.js
var config = require('../../../config.js');
var util = require('../../../utils/util.js');
var app = getApp();
var in_length = 0;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tab_two_click_item: 0,
    _data: [],

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.show_data(0, in_length);
  },
  /**
   * 页面下拉刷新的处理函数
   */
  onPullDownRefresh() {
    in_length = 0;
    this.show_data(this.data.tab_two_click_item, in_length)
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    this.show_data(this.data.tab_two_click_item, in_length)
  },
  // 加载数据
  show_data: function(_item, _length) {
    var that = this;
    app.promise.then(resolve => {
      let data = {
        token: app.token,
        status: _item, //0 全部 1 成功 2 失败
        index: _length
      }
      var url = config.HTTP_URL + '/v1/order/list.do';
      util.request(url, 'post', data, '正在加载订单', function(res) {
        var _data = res.data.body;
        if (in_length == 0) {
          that.setData({
            _data: _data
          })
          in_length = _data.length;
        } else {
          let arr = [];
          let __data = that.data._data.concat(_data);
          if (that.data.tab_two_click_item == 0) {
            that.setData({
              _data: __data
            })
            in_length = __data.length;
          } else {
            for (let i = 0; i < __data.length; i++) {
              console.log(__data[i])
              if (__data[i].orderStatus == that.data.tab_two_click_item) {
                console.log('__data[i]', __data[i])
                arr = arr.concat(__data[i])
              }
            }
            in_length = arr.length;
            that.setData({
              _data: arr
            })
          }
        }
        console.log('in_length', in_length)
      })
    })
  },

  // 点击切换tab
  tab_two_click: function(e) {
    in_length = 0;
    this.setData({
      tab_two_click_item: e.target.id
    })
    this.show_data(e.target.id, in_length);
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

wxml代码

<!--pages/my_order/my_order.wxml-->
<view class='page_row'>
  <view class='tab_two'>
    <view bindtap='tab_two_click' id='0' class='tab_two_click_item {{tab_two_click_item==0?"tab_on":""}}'>全部</view>
  </view>
  <view class='tab_two'>
    <view bindtap='tab_two_click' id='1' class='tab_two_click_item {{tab_two_click_item==1?"tab_on":""}}'>成功</view>
  </view>
  <view class='tab_two'>
    <view bindtap='tab_two_click' id='2' class='tab_two_click_item {{tab_two_click_item==2?"tab_on":""}}'>失败</view>
  </view>
</view>
<view class='order_list'>
  <block wx:for='{{_data}}' wx:key='index'>
    <view class='money'>{{item.productName}}
      <text>{{item.createTime}}</text>
    </view>
    <image wx:if='{{item.orderStatus==1}}' src='/images/change_version/stutas_succ.png'></image>
    <image wx:if='{{item.orderStatus==0}}' src='/images/change_version/stutas_fail.png'></image>
    <view class='detail'>
      <text style='color: #d0d0d0;'>账号</text> {{item.number}}</view>
    <view class='detail' style='margin-top: 20rpx;'>
      <text style='color: #d0d0d0;'>金额</text> ￥
      <text style='font-size:60rpx;'>{{item.payFee}}</text>
    </view>

    <view class='division'></view>
    <view class='page_row' style='width:100%;'>
      <navigator url='order_query/order_query' wx:if='{{item.orderStatus==0}}'>
        <button class='btn_kf btn_ts' style='margin-left: 30rpx;'>投诉</button>
      </navigator>
      <button class='btn_kf' wx:if='{{item.orderStatus==0}}'>联系客服</button>
      <button class='btn' style='{{item.orderStatus==0?"left: 0rpx;":"left: 480rpx;"}}'>再次充值</button>
    </view>
    <view class='division2'></view>
  </block>
</view>

wxss代码

/* pages/my_order/my_order.wxss */
page{
  
  background: #F6F6F6;
}
.tab_two{
  background: #fff;
  font-weight: 600;
  width: 50%;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #E8E8E8;
  position: relative;
}
.tab_two_click_item{
  width: 180rpx;
  position: relative;
  left: 50%;
  margin-left: -90rpx;
}
.tab_on{
  border-bottom: 10rpx solid #19ad19;
}
.order_list{
  background: #fff;
  width: 95%;
  position: relative;
  margin: 20rpx 20rpx 20rpx 20rpx;

}
.order_list .money{
  border-bottom: 1px solid #f2f2f2;
  padding:  20rpx 20rpx 20rpx 40rpx;
}
.order_list .money text{
  color: #666;
  font-size: 28rpx;
  float: right;
  line-height: 50rpx;
  margin-right: 20rpx;
}
.order_list .detail{
  margin-top: 50rpx;
  margin-left: 30rpx;
  font-size: 35rpx;
  
}
.order_list .detail text{
  margin-right: 30rpx;
  font-size: 35rpx;
  
}
.order_list image{
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin-top: 50rpx;
  margin-left: 480rpx;
  position: absolute
}
.division{
  width: 100%;
  height: 1px;
  background: #f2f2f2;
  margin-top: 70rpx;
}
.btn{
  background: #1AAD1A;
  color: white;
  border-radius: 10rpx;
  margin-top: 20rpx;
  width: 200rpx;
  height: 60rpx;
  font-size: 30rpx;
  line-height: 57rpx;
  position: relative;
  
  margin-left: 10rpx;
}
.btn_kf{
  background: #fff;
  margin-left: 10rpx;
  color: #19ad19;
  border-radius: 10rpx;
  margin-top: 20rpx;
  font-size: 30rpx;
  width: 200rpx;
  height: 60rpx;
  position: relative;
  left: 20rpx;
  line-height: 57rpx;
  border: 1px solid #19ad19;
}
.btn_ts{
  left: 10rpx;
}
.division2{
  width: 100%;
  height: 20rpx;
  background: #f2f2f2;
  margin-top: 20rpx;
}