最近小程序做到一个很常见的需求，订单列表功能。虽说看着很常见，做起来也发现了有一些坑。效果如图：

这里就是顶部tab页切换到不同状态的订单，下次切回来不刷新页面而且需要跳到上次浏览的地方，然后滑动每个页面对应的tab也能完成相应的切换。小程序的话很容易就想到swiper组件，然后滑动的当前swiper-item和tab的index对应起来就可以了。而且页面滑动页有对应的scroll-view组件使用，最开始确实是用的scroll-view，而且这个组件里面还有自带的bindscroll和srcollTop属性，第一版做完后发现小程序的scroll-view会导致自己的下拉刷新onPullDownRefresh失效，而且开始设想的每次记录当前tab的页面滚动高度然后赋值给scroll-view的srcollTop属性，从而达到再切换回来的时候滚动到上次的位置，貌似也是不行的，既然scroll-view达不到滚动到上次记录的位置，那就还是换成普通的view吧。

闲话到此，直接上代码，WXML代码：

<!--pages/ordes/ordes.wxml-->
<view class="content" wx:if="{{showOrderVer==2}}"><view class="header-fixed"><!-- 搜索部分 --><view class="header-search" bindtap="gotoOrderSearch"><view class="search-box"><image class="search-icon" src="../../common/images/search-icon.png"></image><input class="search-input" type="text" disabled="true" placeholder="商品名称/订单号/出库单号"></input></view><span class="search-btn">搜索</span></view><!--Tab布局--><scroll-view class="scroll-bangdan" scroll-x="true" scroll-left="{{scrollLeft}}"><view class="tabTitle"><block wx:for="{{tabNavList}}" wx:key="index"><view class="toc {{current==index?'titleSel':'titleUnsel'}}" bindtap="changeTab" data-index="{{index}}"><text>{{item.columnName}}</text><hr class="{{index == current ? 'headerLineSel' : 'headerLineUnsel'}}" /></view></block></view></scroll-view></view><!-- tab页签部分 --><view class="tabNav-box"><!--内容布局--><view class="scroll-swiper"><swiper class='tabSwiper' style="height:{{orderList[curListId].swiperHeight}}rpx;" duration="300" bindchange='bindchange' current='{{current}}'><block wx:for="{{tabNavList}}" wx:key="index"><swiper-item><block wx:if="{{orderList[item.searchState].data.length>0}}"><view class='orderItem' wx:for="{{orderList[item.searchState].data}}" wx:for-item="orderItem" wx:key='index'><view class="order-header" data-ordercode = "{{orderItem.orderCode}}" bindtap="gotoOrderDetail"><text class="orderTime">{{orderItem.orderTimeStr}}</text><text class="orderState {{(6==orderItem.orderState || 8==orderItem.orderState || 12==orderItem.orderState || 17==orderItem.orderState)?'grey999':''}}">{{orderItem.orderStateStr}}</text></view><view class="order-body"><view class="goods-content {{(!orderItem.yjTotalReward && !orderItem.getReward && !orderItem.canGetReward && !orderItem.haveRewardTip)?'morePadding':''}}" data-ordercode = "{{orderItem.orderCode}}" bindtap="gotoOrderDetail"><view class="goodsImg-box"><view class="multiGoods" wx:if="{{orderItem.prodImgList.length>1}}"><image class="goodsImg" wx:for="{{orderItem.prodImgList}}" wx:key="index" src="{{'https:'+item}}"></image></view><view class="singleGood" wx:else><image class="goodsImg" src="{{'https:'+orderItem.prodImg}}"></image><view class="goodsText"><view class="goodsName">{{orderItem.prodName}}</view><view class="goodsDesc"><text class="goodsSpec">{{orderItem.prodSpec}}</text><text class="goodsCompany">{{orderItem.manufacture}}</text></view></view></view></view><view class="numAndPrice"><view class="goodsNum" >共{{orderItem.prodNum}}件</view><view class="goodsPrice" ><text class="yen">¥</text>{{orderItem.orderPriceStr}}</view></view></view><view class="rewardPrice-content"><view class="rewardPriceText" wx:if="{{orderItem.yjTotalReward && !orderItem.getReward}}">约返奖励金{{orderItem.yjTotalReward}}元</view><view class="rewardPriceText" wx:if="{{orderItem.yjTotalReward && orderItem.getReward}}">约返奖励金{{orderItem.yjTotalReward}}元，已领{{orderItem.getReward}}元</view><view class="rewardPriceText" wx:elif="{{!orderItem.yjTotalReward && orderItem.getReward}}">已领奖励金{{orderItem.getReward}}元</view><image class="rewardPriceTips" wx:if="{{orderItem.haveRewardTip && (orderItem.yjTotalReward || (orderItem.getReward && orderItem.yjTotalReward))}}" src="../../common/images/questionMark.png" bindtap="rewardPricePop"></image><view class="rewardPrice" wx:if="{{orderItem.canGetReward}}">待领奖励金{{orderItem.canGetReward}}元</view></view></view><view class="order-footer"><view class="order-btn " wx:if="{{5==orderItem.orderState}}" data-ordercode = "{{orderItem.orderCode}}" bindtap="confirmReceiptPop">确认收货</view><view class="order-btn " wx:if="{{0==orderItem.orderState || 4==orderItem.orderState || 5==orderItem.orderState || 6==orderItem.orderState}}" data-ordercode = "{{orderItem.orderCode}}" bindtap="gotoLogistics">查看物流</view><view class="order-btn " wx:if="{{11!=orderItem.orderState}}" data-ordercode = "{{orderItem.orderCode}}" bindtap="payAgain">再次购买</view><view class="order-btn getRewardPrice" wx:if="{{(4==orderItem.orderState || 5==orderItem.orderState || 6==orderItem.orderState) && orderItem.canGetReward}}" data-ordercode = "{{orderItem.orderCode}}" bindtap="getRewardPrice">领奖励金</view><view class="gotoPay-box" wx:if="{{11==orderItem.orderState}}"><counter remainTime="{{orderItem.payLimitTime}}" bindcallback="refreshPage" wx:if="{{orderItem.payLimitTime}}"></counter><view class="order-btn gotoPay" data-ordercode = "{{orderItem.orderCode}}" bindtap="gotoPay">去支付</view></view></view></view></block></swiper-item></block></swiper><!-- 底部加载更多 --><view class="m-end" hidden="{{orderList[curListId].endTipHidden}}"><block wx:if="{{endTip=='正在加载'}}"><view class="icon"></view></block>{{endTip}}</view><view class="no_order" wx:if="{{orderList[curListId].data.length==0}}"><image class="no_order_img" src="{{imgUrl}}/goodsDetail/goodsEmptyImg.png"></image><view class="no_order_text" >您还没有相关订单</view> </view><view class="m-end" wx:else hidden="{{!orderList[curListId].endTipHidden}}">—— 没有更多了 ——</view></view></view><!-- 预估可领奖励金弹出框部分 --><showModal showModal="{{isShowRewardPrice}}" cancelText="" title="预估可领奖励金" content="{{rewardPriceContent}}" textAlign="left" hideTabBar="true"></showModal><!-- 确认收货弹出框部分 --><showModal showModal="{{isShowconfirmReceipt}}" confirmText="确认收货" content="{{confirmReceiptContent}}"data-ordercode="{{orderCode}}" bind:onConfirm="onConfirmReceipt" hideTabBar="true"></showModal><!-- 奖励金入账弹出框部分   --><showModal showModal="{{isShowMyReward}}" confirmText="我的奖励金" content="{{myRewardContent}}"bind:onConfirm="onConfirmMyReward" hideTabBar="true"></showModal>
</view>
<web-view wx:elif="{{showOrderVer==1}}" src="{{url}}"></web-view>

可以看到swiper由于有一个默认的高度，所以需要在每个页签加载的时候计算出当前页签页面的高度，所以就有了style="height:{{orderList[curListId].swiperHeight}}rpx;"，由于我们的小程序要做新老版本的兼容，所以又有了一个showOrderVer的判断，老版本的话就是直接web-view嵌的H5页面，新版本的话是小程序原生的。

JS代码：

// pages/ordes/ordes.js
import http from "../../util/http";
import {config} from "../../config/envConfig";
Page({/*** 页面的初始数据*/data: {orderVersion:'',//登录获得的版本号showOrderVer:'',//显示订单版本imgUrl:config.imageUrl,//订单状态 默认全部 , 待支付-11，待出库-0，待收货-5，已完成-6tabNavList: [{"columnName": '全部',"searchState": ""}, {"columnName": '待支付',"searchState": "11"}, {"columnName": '待出库',"searchState": "0"}, {"columnName": '待收货',"searchState": "5"}, {"columnName": '完成',"searchState": "6"}],navPosition: [],orderList: {}, //订单列表对象，存放5个状态的订单curListId: '', //当前选中状态的id，默认全部 , 待支付-11，待出库-0，待收货-5，已完成-6endTipHidden: false,endTip: '正在加载',current: 0,scrollLeft: 0,px2rpx: 2,winWidth: 375,winHeight:0,scrollTop: 0,loadFlag:false,isShowconfirmReceipt:false,//确认收货弹出框confirmReceiptContent:['请收到商品后，再确认收货'],orderCode:'',//确认收货弹出框按钮需要的参数isShowRewardPrice:false,//预估可领奖励金弹出框rewardPriceContent:['1.因税率和药监特殊要求，订单可能会被拆单发货，奖励金按拆单后的包裹计算。','2.若订单商品出库被冲红，实际领取奖励金以出库商品为准。'],isShowMyReward:false,//奖励金入账提示弹出框myRewardContent:'',},onShow(){if(this.data.showOrderVer!=this.data.orderVersion){//获得订单版本this.getOrderVer();}},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {getApp().getGlobalUserInfo(true).then(res=>{this.TOKEN=res.token;this.setData({current:options.index || 0, //当前tab页的indexorderVersion:res.orderVersion,//登录信息里的版本号});//获得订单版本this.getOrderVer();}).catch(err=>{console.error(err)})},//获得订单显示版本号getOrderVer(){http.fetch(http.GET_ORDER_VER).then(res => {if(res.status == 1){this.setData({showOrderVer:res.data.version})if(res.data.version == 2){this.setData({orderList:{}});this.getSystem();this.getNav(this.data.current);}else{this.setData({url:config.page+'/Orders?TOKEN='+this.TOKEN+'&t='+Math.random()}) }}}).catch((err) => {})   },//刷新页面refreshPage:function(){this.setData({orderList:{}});var cid = this.data.curListId;this.getOrderList(cid);},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {this.loadMoreList();},//下拉刷新onPullDownRefresh: function() {wx.showNavigationBarLoading()this.refreshPage();setTimeout(() => {wx.hideNavigationBarLoading()wx.stopPullDownRefresh()}, 2000);},//跳转搜索页面gotoOrderSearch(){wx.navigateTo({url: `/pages/orders/orderSearch/orderSearch`});},timer: null,getSystem: function() {var self = this;wx.getSystemInfo({success: function(res) {self.setData({winWidth: res.windowWidth,winHeight:res.windowHeight,px2rpx: 750 / res.windowWidth})},});},//获取导航和节点getNav: function(index) {var self = this;self.setData({current: index});//获取导航的初始位置const query = wx.createSelectorQuery()query.selectAll('.toc').boundingClientRect();query.exec(function(res) {self.setData({navPosition: res[0]})if (index >= 4) {self.setData({scrollLeft: res[0][index].left})}})self.getOrderList(self.data.tabNavList[index].searchState);},//滑到底部加载更多loadMoreList: function() {var orderList = this.data.orderList;var cid = this.data.curListId;if (orderList[cid].page < orderList[cid].pageCount && !this.data.loadFlag) {this.getOrderList(cid);}},//请求列表getOrderList: function(cid) {var self = this;this.setData({curListId: cid,loadFlag:true})var orderList = this.data.orderList;if (!orderList[cid]) {http.fetch(http.ORDER_LIST + `?searchState=${cid}&page=1`).then(res => {var obj = {};obj.page = res.data.page;obj.pageCount = Math.ceil(res.data.total / res.data.rows);obj.total = res.data.total;obj.data = res.data.orderList;if(res.data.total){obj.swiperHeight = res.data.total > res.data.rows * res.data.page ? res.data.rows * res.data.page * 400 : res.data.total * 400;}else{obj.swiperHeight = 2*self.data.winHeight-170;}if (res.data.page * res.data.rows >= res.data.total) {obj.endTip = '没有更多了';obj.endTipHidden = true;} else {obj.endTip = '正在加载';}orderList[cid] = obj;self.setData({loadFlag:false,orderList})}).catch((err) => {})} else {if (orderList[cid].page < orderList[cid].pageCount) {http.fetch(http.ORDER_LIST + `?searchState=${cid}&page=${orderList[cid].page+1}`,{urlType: 'wap'}).then(res => {var obj = {};obj.page = res.data.page;obj.pageCount = Math.ceil(res.data.total / res.data.rows);obj.total = res.data.total;obj.data = orderList[cid].data.concat(res.data.orderList);if (res.data.page * res.data.rows >= res.data.total) {obj.endTip = '没有更多了';obj.endTipHidden = true;} else {obj.endTip = '正在加载';}obj.swiperHeight = res.data.total > res.data.rows * res.data.page ? res.data.rows * res.data.page * 400 : res.data.total * 400 ;orderList[cid] = obj;self.setData({loadFlag:false,orderList})}).catch((err) => {})     }}},//切换导航（包含滑动swiper和切换导航跳转）switchNav: function(index) {if (index && this.data.current == index) return;console.log('switchtab');var cid = this.data.tabNavList[index].searchState;var self = this;var scrollLeft = 0;if (self.data.navPosition[index].right * self.data.px2rpx + 62 >= 750) {scrollLeft = self.data.navPosition[index].left;}var orderList = self.data.orderList;var scrollTop = 0;if (orderList[cid] && orderList[cid].scrollTop) {scrollTop = orderList[cid].scrollTop}if (!orderList[cid]) {clearTimeout(self.timer);self.timer = null;self.timer = setTimeout(function() {self.setData({curListId: cid,current: index,scrollLeft,scrollTop})self.getOrderList(cid);}, 500);} else {self.setData({curListId: cid,current: index,scrollLeft,scrollTop})}//滚动到滚动条的位置this.gotoScrollTop();},//获取滚动条位置onPageScroll(e){var self = this;setTimeout(function() {var orderList = self.data.orderList;if (orderList[self.data.curListId]) {orderList[self.data.curListId].scrollTop = e.scrollTop;self.setData({orderList})}}, 300);},//滚动到滚动条的位置gotoScrollTop(){var self = this;var orderList = self.data.orderList;if (orderList[self.data.curListId]) {wx.pageScrollTo({scrollTop:orderList[self.data.curListId].scrollTop,duration: 300});}},//切换导航changeTab: function(e) {console.log('changetab');var index = e.currentTarget.dataset.index;this.switchNav(index);},//滑动swiperbindchange: function(e) {console.log('changeswiper');var index = e.detail.current;//加上这个避免swiper过程，swiper-item会发生滑动混乱，滑动过快就会一直在闪动，新的API属性，touch说明是用户接触滑动，而不是自动滑动if (e.detail.source && e.detail.source =='touch'){this.switchNav(index);}},//预估可领奖励金弹出框rewardPricePop(){//隐藏底部tabbarwx.hideTabBar();this.setData({isShowRewardPrice: true});},//确认收货弹框confirmReceiptPop(event){//隐藏底部tabbarwx.hideTabBar();this.setData({isShowconfirmReceipt: true,orderCode:event.currentTarget.dataset.ordercode});},//点击确认收货按钮onConfirmReceipt(event){var self =this;wx.showLoading();http.fetch(http.CONFIRM_RECEIPT,{commitId:event.currentTarget.dataset.ordercode}).then(res => {wx.hideLoading();if(res.status == 1){wx.showToast({title:"收货成功",icon: 'success',//图标，支持"success"、"loading" complete:function(){var cid = self.data.curListId;self.setData({orderList:{}});self.getOrderList(cid);//滚动到当前位置self.gotoScrollTop();}})}else{wx.showToast({title: res.msg,icon: 'none'})}}).catch((err) => {wx.hideLoading();})   },//跳转订单详情页面gotoOrderDetail(event){wx.navigateTo({url: `/pages/orders/orderDetail/orderDetail?commitId=${event.currentTarget.dataset.ordercode}`});},//去支付gotoPay(event){wx.navigateTo({url: `/pages/pay/payWap/payWap?orderCode=${event.currentTarget.dataset.ordercode}`});},//再次购买payAgain(event) {wx.showLoading();http.fetch(http.ADD_CARTFROM_ORDER,{orderid: event.currentTarget.dataset.ordercode,v:2}).then(res => {wx.hideLoading();if(res.status == 1){wx.switchTab({url: '/pages/shopcart/shopcart',})}}).catch((err) => {wx.hideLoading();})   },//领奖励金getRewardPrice(event) {wx.showLoading();http.fetch(http.GET_ORDER_BONUS,{orderCode: event.currentTarget.dataset.ordercode}).then(res => {wx.hideLoading();if(res.data.success){if(res.data=={}){wx.showToast({title: '服务器繁忙，请稍后再试',icon: 'none'})}else{//隐藏底部tabbarwx.hideTabBar();this.setData({isShowMyReward:true,myRewardContent:['+ '+res.data.bonus+' 元','奖励金已入账！'],orderList:{}});var cid = this.data.curListId;this.getOrderList(cid);} }else{wx.showToast({title: res.msg,icon: 'none'})}}).catch((err) => {wx.hideLoading();})   },//跳转我的奖励金页面onConfirmMyReward(){wx.navigateTo({url: `/pages/mine/wallet/walletDetails/bonus/index`});},//查看物流gotoLogistics:function(event){wx.navigateTo({url: `/pages/orders/orderLogistics/orderLogistics?orderCode=${event.currentTarget.dataset.ordercode}`})},
})

然后滑动到上次切换tab的位置的话，小程序有一个onPageScroll的方法，可以记录当前滚动条的位置，然后用wx.pageScrollTo让页面滚动到记录的位置即可，滑动swiper同样可以和tab联动。

WXSS代码：

/* pages/ordes/ordes.wxss */
page{background: #F2F2F2;
}
.header-fixed{position: fixed;top:0;width:100%;z-index: 10;
}
/* 搜索部分样式 */
.clearfix::after{display: table;content: '';clear: both;
}
.header-search{display: -webkit-flex; /* Safari */display: flex;align-items: center;justify-content: space-between;background: #fff;
}
.search-box{width: 82%;display: -webkit-flex; /* Safari */display: flex;align-items: center;margin:16rpx 0 16rpx 30rpx;height: 60rpx;line-height: 60rpx;background:#EDEDED;border-radius:30rpx;
}
.search-icon{margin-left: 26rpx;
}
.search-input{display: inline-block;width:86%;font-size: 26rpx;margin-left: 14rpx;
}
.search-btn{font-size: 28rpx;color: #333333;margin-right: 32rpx;
}
.search-icon{width: 20rpx;height:20rpx;
}
/* tab页签部分样式 */
.tabNav-box {margin-top:170rpx;
}
.scroll-bangdan {width: 100%;height: 70rpx;position: relative;top: 0;z-index: 500;
}
.tabTitle {width: 100%;height: 70rpx;background:#fff;display: flex;align-items: center;justify-content: space-around;
}
.titleUnsel {color: #666666;font-size: 30rpx;display: flex;flex-direction: column;align-items: center;height: 70rpx;justify-content: flex-end;
}
.titleSel{color: #333333;font-size: 30rpx;display: flex;flex-direction: column;align-items: center;font-weight: bold;height: 70rpx;justify-content: flex-end;
}
.headerLineSel {background: #0095FF;height: 6rpx;width: 40rpx;position: relative;margin-top: 10rpx;box-shadow:2rpx 2rpx 6rpx 0px rgba(81,231,253,0.3);border-radius:4rpx;
}
.headerLineUnsel {background: #fff;height: 6rpx;width: 40rpx;position: relative;margin-top: 10rpx;box-shadow:none;
}
.tabSwiper {width: 100%;
}
/* 订单列表部分样式 */
.orderItem {height:380rpx;margin:20rpx 20rpx 0 20rpx;background-color: #fff;border-radius: 10rpx;
}
.order-header{display: -webkit-flex; /* Safari */display: flex;align-items: center;justify-content: space-between;padding:20rpx;
}
.orderTime{font-size: 28rpx;color: #3E3E3E;padding-left: 10rpx;font-weight: bold;
}
.orderState{font-size: 26rpx;color: #FF7800;margin-right: 10rpx;font-weight: bold;
}
.grey999{color:#999;
}
.order-body{background: #FAFAFA;padding:0 20rpx;
}
.goods-content{display: -webkit-flex; /* Safari */display: flex;align-items: center;justify-content: space-between;padding-top: 20rpx;
}
.goods-content.morePadding{padding-top:40rpx;
}
.goodsImg{width:120rpx;height:120rpx;margin-right: 10rpx;background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAU8AAAFPCAYAAADNzUzyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkQwQ0JBREVDRkZCMTFFNzlCNUU5NkJFNkI4MTQ2NUIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkQwQ0JBRERDRkZCMTFFNzlCNUU5NkJFNkI4MTQ2NUIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmRpZDpBQjRGQjFFOEY4Q0ZFNzExODg4OUU2M0M4NUVBRDlDMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQjRGQjFFOEY4Q0ZFNzExODg4OUU2M0M4NUVBRDlDMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp7B2dgAABQgSURBVHja7N0LkGRV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");background-size: 100%;
}
.singleGood,.multiGoods{display: -webkit-flex; /* Safari */display: flex;align-items: center;justify-content: space-between;
}
.goodsText{margin-left: 10rpx;
}
.goodsName{font-size: 24rpx;color:#333333;max-width:240rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.goodsDesc{font-size: 22rpx;color: #888888;max-width:240rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.goodsCompany{margin-left: 10rpx;
}
.numAndPrice{display: -webkit-flex; /* Safari */display: flex;align-items: center;
}
.goodsNum{color: #333333;font-size: 24rpx;
}
.goodsPrice{color:#333333;font-size: 32rpx;font-weight: bold;margin-left: 10rpx;
}
.yen{font-size: 26rpx;
}
.rewardPrice-content{font-size: 22rpx;padding-top:10rpx;padding-bottom: 20rpx;min-height: 10rpx;
}
.rewardPriceText{display: inline-block;color: #888;max-width:400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;
}
.rewardPriceTips{width:26rpx;height: 26rpx;margin:0 10rpx 0 4rpx;vertical-align: middle;
}
.rewardPrice{display: inline-block;color: #C48117;vertical-align: middle;
}
.order-footer{text-align: right;padding:24rpx 20rpx;
}
.order-btn{display: inline-block;padding:10rpx 26rpx;border:1rpx solid #ccc;border-radius:70rpx;font-size:24rpx;color:#333;margin-right: 10rpx;
}
.getRewardPrice{color:#D58B17;border:1rpx solid #D58B17;
}
.gotoPay-box{color: #0095FF;
}
.gotoPay{color: #0095FF;border:1rpx solid #0095FF;
}
.m-end {font-size: 24rpx;padding: 30rpx;line-height: 28rpx;text-align: center;color: #B2B2B2;
}
.no_order{position: absolute; left: 50%; top: 40%;transform: translate(-50%, -50%);  z-index: -1; 
}
.no_order_img{width:300rpx;height:300rpx;
}
.no_order_text{text-align: center;font-size: 24rpx;color:#999;
}

页面还有个待支付的倒计时组件，JS代码如下：

// components/counter/counter.js
Component({/*** 组件的属性列表*/properties: {remainTime:String,//剩余时间callback: String, // 回调},/*** 组件的初始数据*/data: {time: ''},ready () {this.init();},countDownID:null,lifetimes: {// 生命周期函数，可以为函数，或一个在methods段中定义的方法名attached: function () { },moved: function () {//clearInterval(this.countDownID);},detached: function () {clearInterval(this.countDownID);},},pageLifetimes: {// 组件所在页面的生命周期函数show: function () {this.endfn();},hide: function () {clearInterval(this.countDownID);},resize: function () { },},/*** 组件的方法列表*/methods: {init(){var self = this;if(self.data.remainTime!='' && self.data.remainTime >= 0){var remainTime = parseInt(self.data.remainTime)*1000;self.countDownID = setInterval(function() {remainTime -= 1000;self.getFormat(remainTime);//console.log(self.countDownID)}, 1000);}else{clearInterval(this.countDownID);}},getFormat (remainTime) {var time = "";var min = parseInt((remainTime / 1000 / 60) % 60);var sec = parseInt((remainTime / 1000) % 60);min = min > 9 ? min : "0" + min;sec = sec > 9 ? sec : "0" + sec;time ='还剩' + min + '分' + sec + '秒';if(remainTime >= 0){this.setData({time: time});}else{clearInterval(this.countDownID);this.endfn();return;}},//倒计时结束的回调endfn () {this.triggerEvent('callback', {});}}
})

一定要注意的就是每次倒计时结束和跳出订单列表页的时候需要清除当前定时器。