最近小程序做到一个很常见的需求,订单列表功能。虽说看着很常见,做起来也发现了有一些坑。效果如图:
这里就是顶部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=