微信小程序订单页面下拉刷新上拉分页加载
微信小程序开发交流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;
}相关文章：
从网络上获取一张图片简单的
告诉ScrollView缩放的视图，要设置scrollView的代理。 转载于:https://www.cnblogs.com/x1024598115/p/4182674.html
es6 generator_让我们探索一下ES6 Generators
es6 generatorby Tiago Lopes Ferreira由Tiago Lopes Ferreira 让我们探索一下ES6 Generators (Let’s explore ES6 Generators) Generators are an implementation of iterables.生成器是可迭代对象的实现 。 The big deal about generators is that they are functions tha…
没听说过这些，就不要说你懂并发了，three。
引言 很久没有跟大家再聊聊并发了，今天LZ闲来无事，跟大家再聊聊并发。由于时间过去的有点久，因此LZ就不按照常理出牌了，只是把自己的理解记录在此，如果各位猿友觉得有所收获，就点个推荐或者留言激励下LZ&am…
设计模式之代理模式（Proxy Pattern）
定义：为其他对象提供一种代理以控制这个对象的访问，也叫做委托模式。 咱们比作游戏，通俗讲代理模式就是，一个主题虚基类派生出两个子类，一个玩家类，实现相关操作，一个是代练类，代替执…
[微信小程序]给data的对象的属性赋值
有问题可以扫码加我微信，有偿解决问题。承接小程序开发。 微信小程序开发交流qq群 173683895 、 526474645 ； 正文： <view wx:for"{{leixing}}"><button class"leixing_btn {{user_infor.lx_btnitem.divingtype…
无家可归的iPhone
by Fabrice Dubois通过Fabrice Dubois 无家可归的iPhone (Homeless iPhone) So, apparently the next iPhone won’t have a physical Home button. There’s been much speculation already about what that means for the user. The bottom area of the device, for some, w…
Spring 自动化装配Bean
声明一张cd的接口： public interface CompactDisc {public abstract void play(); } 实现cd接口： Component("SgtPeppers") public class SgtPeppers implements CompactDisc {private String title "Sgt.Peppers Lonely Hearts Club Ba…
js中函数,方法,事件对比区分，什么是方法，什么是函数
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文： 简单的理解：函数是运行在本地的，方法是公用的。 事件是开关，通过某某事件触发某个函数 通常命名规范 函数的命名使用小写字母和下划线ÿ…
笔记 JVM调优流程
待续 转载于:https://www.cnblogs.com/leeeee/p/7276287.html
创建新的apple id_Google是新的Apple吗？
创建新的apple idby Sumit Gupta由Sumit Gupta Google是新的Apple吗？ (Is Google the new Apple?) 随着众多设备的推出，谷歌试图击败苹果。 “由Google制造”会使Google更像Apple吗？ (With the launch of numerous devices, Google is tryi…
yeomen/bower/grunt
yeomen: npm install yo angular-in-action project npm install -g generator-angular npm install -g genrator-webapp yo angular learnangular new angular project yo webapp grunt-by-yeomen package.json npm install (执行package.json所指定的依赖包) bower: npm ins…
Window Server 2008 R2 安装 Share Point 2013
原文地址：http://www.cnblogs.com/jianyus/p/3631905.html转载于:https://www.cnblogs.com/gaobing/p/4191060.html
esp freertos_如何开始使用FreeRTOS和ESP8266
esp freertosby Denis Nuțiu丹尼斯努尤(Denis Nuțiu) 如何开始使用FreeRTOS和ESP8266 (How to get started with FreeRTOS and ESP8266) Recently, I purchased a NodeMCU from AliExpress for about $4. The reason I did this was to find out what all the fuss is about…
[SCOI2007]修车
题目描述 同一时刻有N位车主带着他们的爱车来到了汽车维修中心。维修中心共有M位技术人员，不同的技术人员对不同的车进行维修所用的时间是不同的。现在需要安排这M位技术人员所维修的车及顺序，使得顾客平均等待的时间最小。 说明：顾客的等待时…
[微信小程序]时间戳转日期
有问题可以扫码加我微信，有偿解决问题。承接小程序开发。 微信小程序开发交流qq群 173683895 、 526474645 ； 正文： // util.js //时间戳转换成日期时间 function js_date_time(unixtime) {var dateTime new Date(parseInt(unixtime) …
React模式：集中式PropTypes
通过集中化PropType避免重复自己 (Avoid repeating yourself by centralizing PropTypes) There are three popular ways to handle types in React: PropTypes, TypeScript and Flow. This post is about PropTypes, which are currently the most popular.在React中有三种流行…
Java Class SecurityManager
# 前言 简单了解 SecurityManager。具体查阅 API。 # What 它是 Java 沙盒模型控制安全的重要一个环节。它是 Java 的一个类。下面一段话源于SecurityManager API： The security manager is a class that allows applications to implement a security policy. It a…
微信小程序,对象转换成数组
有问题可以扫码加我微信，有偿解决问题。承接小程序开发。 微信小程序开发交流qq群 173683895 、 526474645 ； 正文： 对象转数组: var jiu res.data.k4.f3var nArr [];for (var i in jiu){nArr.push(jiu[i]);}console.log(jiu);consol…
sql 事务使用
BEGIN TRAN Tran_Money --开始事务DECLARE tran_error int; SET tran_error 0;BEGIN TRY UPDATE tb_Money SET MyMoney MyMoney - 30 WHERE Name 刘备;SET tran_error tran_error ERROR;--测试出错代码，看看刘备的钱减少，关羽的钱是否会增加--SE…
一群算法_树遍历解释：他们就像一群懒惰的学生，试图欺骗他们的考试
一群算法by Sachin Malhotra由Sachin Malhotra 树遍历解释：他们就像一群懒惰的学生，试图欺骗他们的考试 (Tree Traversals explained: They’re like a class of lazy students trying to cheat on their exam) Imagine that you are enrolled in a mat…
微信小程序转发 分享 打电话功能,完整代码附效果图
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文： 按钮绑定在页面内发起转发事件onShareApp:(注意这里是button 并且给他设置了open-type"share" 属性) <button classbottom_1 bottom_1_zf open-type"share" bi…
《DSP using MATLAB》示例 Example 6.25
代码： % x [-0.9, 0.81]; [y, L, B] QCoeff(x, 3) % Unquantized parameters r 0.9; theta pi/3; a1 -2*r*cos(theta); a2 r*r; p1 r*exp(j*theta); p2 p1;% Quantized parameters: N 3; [ahat, L, B] QCoeff([a1, a2], 3); rhat sqrt(ahat(2)); thetah…
sqlserver查询自定义的函数
1)sp_helptext同样适应用自定义函数 2)sys.sql_modules表也可以查 查看函数的源代码: exec sp_helptext 函数名转载于:https://www.cnblogs.com/toSeeMyDream/p/4195030.html
辍学的名人_我辍学去追求成为网络开发人员和设计师的梦想
辍学的名人by Carlos Sz由Carlos Sz 我辍学去追求成为网络开发人员和设计师的梦想 (I dropped out of college to pursue my dreams of being a web developer and designer) When I was 14, I discovered HTML. Thanks to my computer science teacher at school. And from t…
Java中的static关键字的用法
1.静态方法 static：通常在一个类中定义一个方法为static，那就是说，无需本类的对象即可调用此方法 声明为static的方法有以下几条限制： （1）它们仅能调用其他的static方法。 （2）它们只…
[微信小程序]上传单张和多张图片
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 上传单张图片并展示, <button bindtap"upimg" classjia_img >上传</button> <image src"{{tempFilePaths[0]}}"></image> data{ tempFilePaths:[]; },u…
“猪”飞起来了吗
（让我们用代码改变世界，也让代码改变自己的生活） 台风来了，猪都能飞起来。 这是投资者对A股近期走势最生动的形容。当成交量不断的刷新纪录，直冲1.2万亿天量成交时，股指的高度也在不断的被刷新，…
微信公众号开发本地环境开发_如何在5分钟内使HTTPS在本地开发环境上工作
微信公众号开发本地环境开发Almost any website you visit today is protected by HTTPS. If yours isn’t yet, it should be. Securing your server with HTTPS also means that you can’t send requests to this server from one that isn’t protected by HTTPS. This pos…
pcntl_fork 导致 MySQL server has gone away 解决方案
pcntl_fork 前连数据库，就会报 MySQL server has gone away 错误。原因是子进程会继承主进程的数据库连接，当mysql返回数据时，这些子进程都可以通过这个连接读到数据，造成数据错乱。 该操作数据库的地方还是要操作数据库ÿ…
[微信小程序]滚动选择器
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文： <view class"section"><view class"section__title">普通选择器</view><picker bindchange"bindPickerChange" value"{{ind…