小程序---實現(xiàn)頁面左右tab滑動

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>

重要頁面數(shù)據(jù)

//頁面寬度
  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
  };

網(wǎng)絡請求芹关,動態(tài)計算頁面高度呻此,然后緩存

async listMyProduct() {
    var self = this;
    if (self.pages[self.currentTab].lastPage === 1) {
      utils.zanToast(self, '沒有更多數(shù)據(jù)啦');
      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();
      });
    }
  }

//頁面滾動調(diào)用方法;由微信小程序API提供

onPageScroll(e) {
    //這里的0可以自定義設(shè)置為header高度周蹭;
    if (+e.scrollTop >= 0) {
      //設(shè)置懸浮
      this.isScrollTop = true;
    } else {
      this.isScrollTop = false;
    }
    this.$apply();
  }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末显拜,一起剝皮案震驚了整個濱河市奄妨,隨后出現(xiàn)的幾起案子烙如,更是在濱河造成了極大的恐慌么抗,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件亚铁,死亡現(xiàn)場離奇詭異蝇刀,居然都是意外死亡,警方通過查閱死者的電腦和手機徘溢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門吞琐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來捆探,“玉大人,你說我怎么就攤上這事站粟∈蛲迹” “怎么了?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵卒蘸,是天一觀的道長。 經(jīng)常有香客問我翻默,道長缸沃,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任修械,我火速辦了婚禮趾牧,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘肯污。我一直安慰自己翘单,他們只是感情好,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布蹦渣。 她就那樣靜靜地躺著哄芜,像睡著了一般。 火紅的嫁衣襯著肌膚如雪柬唯。 梳的紋絲不亂的頭發(fā)上认臊,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機與錄音锄奢,去河邊找鬼失晴。 笑死,一個胖子當著我的面吹牛拘央,可吹牛的內(nèi)容都是我干的涂屁。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼灰伟,長吁一口氣:“原來是場噩夢啊……” “哼拆又!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起栏账,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤遏乔,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后发笔,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體盟萨,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年了讨,在試婚紗的時候發(fā)現(xiàn)自己被綠了捻激。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片制轰。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖胞谭,靈堂內(nèi)的尸體忽然破棺而出垃杖,到底是詐尸還是另有隱情,我是刑警寧澤丈屹,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布调俘,位于F島的核電站,受9級特大地震影響旺垒,放射性物質(zhì)發(fā)生泄漏彩库。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一先蒋、第九天 我趴在偏房一處隱蔽的房頂上張望骇钦。 院中可真熱鬧,春花似錦竞漾、人聲如沸眯搭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鳞仙。三九已至,卻和暖如春笔时,著一層夾襖步出監(jiān)牢的瞬間繁扎,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工糊闽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留梳玫,地道東北人。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓右犹,卻偏偏與公主長得像提澎,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子念链,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361