微信小程序中選項(xiàng)卡的實(shí)現(xiàn)方法

小編給大家分享一下微信小程序中選項(xiàng)卡的實(shí)現(xiàn)方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

思路

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

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

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

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

方案

1.首先在js中設(shè)置數(shù)據(jù)

 data: {
    tabs: ['菜單一', '菜單二'],// 導(dǎo)航菜單欄
    curIdx:0,// 當(dāng)前導(dǎo)航索引
    scrollHeight:0, //滾動(dòng)高度 = 設(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)航

<!-- 導(dǎo)航欄開始 -->
<view class="swiper-tab">
  <view wx:for="{{tabs}}" wx:key class="swiper-tab-item {{curIdx==index?'swiper-active':''}}" data-current="{{index}}" catchtap="clickTab">
    <text>{{item}}</text>
  </view>
</view>

3.設(shè)置當(dāng)前活動(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個(gè)數(shù)要與tabs數(shù)組長度 一致

<!-- 內(nèi)容開始 -->
<swiper class="swiper_content" current="{{curIdx}}"   bindchange="swiperTab" style='height:{{scrollHeight}}px'>
  <swiper-item>
    <scroll-view class="scroll-y" scroll-y style='height:{{scrollHeight}}px' bindscrolltolower="onReachBottom">
    <view wx:for="{{list}}" wx:key>
      <text> 內(nèi)容一{{item}}</text>
    </view>
        </scroll-view>
  </swiper-item>
  <swiper-item>
    內(nèi)容二
  </swiper-item>
</swiper>

小程序中的swiper組件有個(gè)問題就是不能根據(jù)內(nèi)容自適應(yīng)高度，所以要通過[wx.getSystemInfoSync][4]獲取設(shè)備高度設(shè)置swiper高度
小程序中的swiper組件中swiper-item內(nèi)容超出可視區(qū)后無法滾動(dòng)顯示，所以這里要用到另一個(gè)組件[scroll-view][5]。
我們?cè)趏nShow函數(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.點(diǎn)擊導(dǎo)航欄切換內(nèi)容

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

6.滑動(dòng)內(nèi)容切換導(dǎo)航欄

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

7.可滾動(dòng)區(qū)域滾動(dòng)最底刷新數(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
    });
  
  },

看完了這篇文章，相信你對(duì)“微信小程序中選項(xiàng)卡的實(shí)現(xiàn)方法”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！