国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序之選項卡

stormjun / 3402人閱讀

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

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

思路

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

小程序中的swiper組件有個問題就是不能根據(jù)內(nèi)容自適應(yīng)高度，所以要通過wx.getSystemInfoSync獲取設(shè)備高度設(shè)置swiper高度

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

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

方案 1.首先在js中設(shè)置數(shù)據(jù) 
 data: {
    tabs: ["菜單一", "菜單二"],// 導(dǎo)航菜單欄
    curIdx:0,// 當(dāng)前導(dǎo)航索引
    scrollHeight:0, //滾動高度 = 設(shè)備可視區(qū)高度 -  導(dǎo)航欄高度
    list:[],// 內(nèi)容區(qū)列表
  },

在onLoad函數(shù)中填充數(shù)據(jù)

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    let list=[];
    for (let i=1;i<=30;i++){
      list.push(i)
    }
    this.setData({
      list: list
    });
  },
2.在WXML中循環(huán)渲染出導(dǎo)航 


  
    {{item}}
3.設(shè)置當(dāng)前活動導(dǎo)航樣式 
/*初始化樣式*/
view, text, picker, input, button, image{
  display: flex;
  box-sizing: border-box;
}
/* 導(dǎo)航樣式*/
.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.內(nèi)容顯示區(qū)

內(nèi)容顯示區(qū)使用swiper組件，swiper-item個數(shù)要與tabs數(shù)組長度 一致



  
    
    
       內(nèi)容一{{item}}
    
        
  
  
    內(nèi)容二

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

  onShow: function () {
    // 100為導(dǎo)航欄swiper-tab 的高度
   this.setData({
     scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100),
   })
  },
5.點擊導(dǎo)航欄切換內(nèi)容 
  //點擊切換
  clickTab: function (e) {
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
  },
6.滑動內(nèi)容切換導(dǎo)航欄 
  //滑動切換
  swiperTab: function (e) {
    this.setData({
      curIdx: e.detail.current
    });
  },
7.可滾動區(qū)域滾動最底刷新數(shù)據(jù) 
  /**
 * 頁面上拉觸底事件的處理函數(shù)
 */
  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
    });
  
  },

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

完整案例

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97525.html

相關(guān)文章

  • 微信小程序 bug 集中營

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

    he_xd 評論0 收藏0

  • 微信小程序 bug 集中營

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

    PascalXie 評論0 收藏0

  • 微信小程序 bug 集中營

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

    lordharrd 評論0 收藏0

  • hello-weapp微信小程序最簡示例教程

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

    Labradors 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<