A96E350E-6E25-4490-B877-1D1C160C15AE.png

定义页面元素

<view class="whole-container">
    <view class="head-container" style="background:#fff;{{isScrollTop?'position:fixed;transform: translate(0);top:0;left:0;z-index:100;':''}}">
      <view class="head-mod" @tap.stop="showTab(0)" hover-class="hover-color">
        <text class="{{currentTab==0?'click-text':'normal-text'}}">待核销</text>
        <view class="bottom-line {{currentTab==0?'':'invisible'}}"></view>
      </view>
      <view class="head-mod" @tap.stop="showTab(1)" hover-class="hover-color">
        <text class="{{currentTab==1?'click-text':'normal-text'}}">已核销</text>
        <view class="bottom-line {{currentTab==1?'':'invisible'}}"></view>
      </view>
      <view class="head-mod" @tap.stop="showTab(2)" hover-class="hover-color">
        <text class="{{currentTab==2?'click-text':'normal-text'}}">已过期</text>
        <view class="bottom-line {{currentTab==2?'':'invisible'}}"></view>
      </view>
    </view>

    <swiper class='swiper' bindchange='pagechange' current='{{currentTab}}' style="min-height: calc({{windowHeight}} - 88rpx);z-index:1;margin:0;height:{{pages[currentTab].pageHeight}}rpx;{{isScrollTop? 'padding-top:88rpx':'padding-top:0rpx'}}">
      <repeat for="{{pages}}" key="index" index="index" item="item">
        <swiper-item style="min-height:100%; height: 100%">
          <view style="height:100%;">
            <view wx:if="{{pages[currentTab].list.length > 0}}" class="sku-v-list" style="padding-top:0;height:100%;">
              <repeat for="{{item.list}}" key="index" index="index" item="I">
                <mySkuItem :skuItem.sync="i" :currentTab.sync="currentTab" />
              </repeat>
            </view>
            <view wx:else style="height: 100%;">
              <empty :isShow.sync="isShow" />
            </view>
          </view>
        </swiper-item>
      </repeat>
    </swiper>
    <toast/>
  </view>

重要页面数据

//页面宽度
  windowWidth: 0,
//页面高度
  windowHeight: 0,
是否滑到最上部；引导悬浮
  isScrollTop: false

计算windowWidth、windowHeight

wx.getSystemInfo({
      success: res => {
        this.windowWidth = res.windowWidth * 2;
        this.windowHeight = res.windowHeight * 2;
        this.$apply();
      }
   });

config = {
    navigationBarTitleText: '我的品项',
    enablePullDownRefresh: true
  };

网络请求，动态计算页面高度，然后缓存

async listMyProduct() {
    var self = this;
    if (self.pages[self.currentTab].lastPage === 1) {
      utils.zanToast(self, '没有更多数据啦');
      return;
    }
    if (!self.pages[self.currentTab].pageHeight) {
      self.pages[self.currentTab].pageHeight = self.windowHeight;
      self.$apply();
    }
    utils.loading();
    var json = await api.listMyProduct({
      query: {}
    });
    if (+json.status === 1) {
      utils.sleep().then(function() {
        if (self.pages[self.currentTab].pageNumber === 1) {
          self.pages[self.currentTab].list = [];
        }
        self.pages[self.currentTab].list = self.pages[self.currentTab].list.concat(json.result.list);
        
        var pageH = self.pages[self.currentTab].list.length * 296//cell高度 + 88//tab高度 + 20//页面底部预留;
        if (pageH < self.windowHeight) {
          pageH = self.windowHeight;
        }
        self.pages[self.currentTab].pageHeight = pageH;
        utils.loaded();
        self.$apply();
      });
    }
  }

//页面滚动调用方法；由微信小程序API提供

onPageScroll(e) {
    //这里的0可以自定义设置为header高度；
    if (+e.scrollTop >= 0) {
      //设置悬浮
      this.isScrollTop = true;
    } else {
      this.isScrollTop = false;
    }
    this.$apply();
  }