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

微信小程序开发交流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)})})},// 点击切换tabtab_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;
}

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

让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键
前言上拉加载和下拉刷新是小程序开发的常见需求.本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能,为用户带来更加流畅.便捷的使用体验. 实现效果如下: 实现思路: 1. 首先需要在使用到的 j ...
微信小程序禁用页面下拉，且局部上下滚动不卡顿
众所周知,微信小程序页面在下拉后,顶部会出现留白的不友好用户体验(当然,需要启用页面下拉刷新的另说).官网有禁用下拉的配置,但使用后,如果页面中局部区域需要滚动显示更多内容时,则会出现滚动不顺畅的情况 ...
可免费阅读各种漫画的微信小程序，内附好用的图片懒加载组件
一个基于漫画台App原生应用的漫画阅读的微信小程序.所有漫画可免费观看(前提是得有资源?). 项目地址:github源码 API接口文档:API 前言? 在学习一门新的语言或者框架时,做好的方法应该是 ...
微信小程序订单页面格式
我在开发一个点餐小程序时,遇到了一个问题,用户通过小程序进入商家,选中自己想下单的菜,如果同一个选了两份,那么订单会显示菜名乘以2,如果在餐厅吃的情况下是没有问题的,如果要有一份带走,那这时候出现的问 ...
微信小程序如何实现上拉刷新（即分页加载数据）？
步骤1. enablePullDownRefresh这个属性设置为true.enablePullDownRefresh可以写在app.json 中和页面的xx.json,两者的区别是, app.j ...
微信小程序-订单页面
说明:头部有一个三种预约状态的切换 wxml页面:  <view class="swiper-tab"><block wx:f ...
微信小程序-订单页面——可左右滑动（附源码）
说明:头部有一个三种预约状态的切换 wxml页面:  <view class="swiper-tab"><block wx:f ...
微信小程序page页面下有多余空白区域（解决方法）
出现的问题是这样子的: 仔细检查,是因为自定义组件导致的问题,但是组件中对高度没有定义,应该是自适应的. 解决方法: 在使用自定义组件的外面套上一层层view,然后给它设置高度并设置超出部分隐藏即可. ...
微信小程序--请求接口时：添加全局的正在加载中图标效果
注: 如果没有封装request.js接口函数请看:https://mp.csdn.net/console/editor/html/106737440 1. 首先在封装的 request.js 文件中 ...

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

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

正文：

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

最新文章

热门文章