微信小程式中選項卡的實作方法

微信小程式中選項卡的應用程式隨處可見，本篇文章就來為大家介紹微信小程式中選項卡的實作。

想法

• 之前寫過基於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中循環渲染出導航

<!-- 导航栏开始 -->
<view class="swiper-tab">
  <view wx:for="{{tabs}}" wx:key class="swiper-tab-item {{curIdx==index?&#39;swiper-active&#39;:&#39;&#39;}}" data-current="{{index}}" catchtap="clickTab">
    <text>{{item}}</text>
  </view>
</view>

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數組長度一致

<!-- 内容开始 -->
<swiper class="swiper_content" current="{{curIdx}}"   bindchange="swiperTab" style=&#39;height:{{scrollHeight}}px&#39;>
  <swiper-item>
    <scroll-view class="scroll-y" scroll-y style=&#39;height:{{scrollHeight}}px&#39; bindscrolltolower="onReachBottom">
    <view wx:for="{{list}}" wx:key>
      <text> 内容一{{item}}</text>
    </view>
        </scroll-view>
  </swiper-item>
  <swiper-item>
    内容二
  </swiper-item>
</swiper>

小程式中的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
    });
  
  },

一個漂亮的選項卡就完成了。 完整案例

以上就是本篇文章的全部內容了，更多精彩請關注php中文網。

以上是微信小程式中選項卡的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！