微信小程序之選項卡

stormjun 發布于2019-08-23 11:49 / 3409人閱讀

摘要：我們在函數中通過獲取設備的寬高來設置組件高度以及高度為導航欄的高度點擊導航欄切換內容點擊切換滑動內容切換導航欄滑動切換可滾動區域滾動最底刷新數據頁面上拉觸底事件的處理函數更新列表一個漂亮的選項卡就完成了完整案例

選項卡隨處可見，微信小程序中也不例外，下面來寫一個簡單的小程序選項卡

思路

之前寫過基于swiper的選項卡，在小程序中有swiper組件，毫無疑問這里要用到swiper組件

小程序中的swiper組件有個問題就是不能根據內容自適應高度，所以要通過wx.getSystemInfoSync獲取設備高度設置swiper高度

小程序中的swiper組件中swiper-item內容超出可視區后無法滾動顯示，所以這里要用到另一個組件scroll-view。

小程序中的swiper組件功能還是比較有限的，有待優化。

方案 1.首先在js中設置數據

 data: {
    tabs: ["菜單一", "菜單二"],// 導航菜單欄
    curIdx:0,// 當前導航索引
    scrollHeight:0, //滾動高度 = 設備可視區高度 -  導航欄高度
    list:[],// 內容區列表
  },

在onLoad函數中填充數據

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    let list=[];
    for (let i=1;i<=30;i++){
      list.push(i)
    }
    this.setData({
      list: list
    });
  },

2.在WXML中循環渲染出導航



  
    {{item}}

3.設置當前活動導航樣式

/*初始化樣式*/
view, text, picker, input, button, image{
  display: flex;
  box-sizing: border-box;
}
/* 導航樣式*/
.swiper-tab {
  position: relative;
  width: 100%;
  height: 100rpx;
  justify-content: center;
  align-items: center;
}

.swiper-tab-item {
  background-color: #f3f3f3;
  width: 50%;
  height: 80rpx;
  justify-content: center;
  align-items: center;
}
.swiper-active{
  background-color: rgb(129, 190, 247);
  color: #fff;
}

4.內容顯示區

內容顯示區使用swiper組件，swiper-item個數要與tabs數組長度一致



  
    
    
       內容一{{item}}
    
        
  
  
    內容二

小程序中的swiper組件有個問題就是不能根據內容自適應高度，所以要通過[wx.getSystemInfoSync][4]獲取設備高度設置swiper高度
小程序中的swiper組件中swiper-item內容超出可視區后無法滾動顯示，所以這里要用到另一個組件[scroll-view][5]。
我們在onShow函數中通過getSystemInfoSync獲取設備的寬高來設置swiper組件高度以及scroll-view高度

  onShow: function () {
    // 100為導航欄swiper-tab 的高度
   this.setData({
     scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100),
   })
  },

5.點擊導航欄切換內容

  //點擊切換
  clickTab: function (e) {
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
  },

6.滑動內容切換導航欄

  //滑動切換
  swiperTab: function (e) {
    this.setData({
      curIdx: e.detail.current
    });
  },

7.可滾動區域滾動最底刷新數據

  /**
 * 頁面上拉觸底事件的處理函數
 */
  onReachBottom: function () {
    // 更新列表
    let list = this.data.list;
    console.log(list)
    let lens = list.length
    for (let i = lens; i < lens+30; i++) {
      list.push(i)
    }
    this.setData({
      list: list
    });
  
  },

一個漂亮的選項卡就完成了

完整案例

GPU云服務器云服務器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97525.html

微信小程序 bug 集中營

摘要：利用這篇教程存儲一些常用的微信小程序開發技巧，方便查找。但是第一，微信小程序是國內的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...

he_xd 2019-08-02 12:03 評論0 收藏0
微信小程序 bug 集中營

摘要：利用這篇教程存儲一些常用的微信小程序開發技巧，方便查找。但是第一，微信小程序是國內的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...

PascalXie 2019-08-29 17:19 評論0 收藏0
微信小程序 bug 集中營

摘要：利用這篇教程存儲一些常用的微信小程序開發技巧，方便查找。但是第一，微信小程序是國內的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...

lordharrd 2019-08-26 13:21 評論0 收藏0
hello-weapp微信小程序最簡示例教程

摘要：倉庫打開微信小程序官方開發文檔，最好全篇看一遍，基本上就會了。 https://github.com/dingyiming... 倉庫：https://github.com/dingyiming... 打開微信小程序官方開發文檔，最好全篇看一遍，基本上就會了。點擊文檔中工具選項卡中下載工具頁面下載對應系統版本的微信開發者工具注意：脫離微信開發者工具是不能調試的好...

Labradors 2019-08-21 14:30 評論0 收藏0