微信小程序中选项卡的实现方法

 data: {    tabs: ['菜单一', '菜单二'],// 导航菜单栏    curIdx:0,// 当前导航索引    scrollHeight:0, //滚动高度 = 设备可视区高度 -  导航栏高度    list:[],// 内容区列表  },

  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    let list=[];    for (let i=1;i<=30;i++){      list.push(i)    }    this.setData({      list: list    });  },

<!-- 导航栏开始 --><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>

/*初始化样式*/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;}

<!-- 内容开始 --><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> 内容一{{item}}</text>    </view>        </scroll-view>  </swiper-item>  <swiper-item>    内容二  </swiper-item></swiper>

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

  //点击切换  clickTab: function (e) {    this.setData({      curIdx: e.currentTarget.dataset.current    })  },

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

  /** * 页面上拉触底事件的处理函数 */  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    });    },