WeChat 미니 프로그램에서 탭을 구현하는 방법

WeChat 미니 프로그램의 탭 적용은 어디에서나 볼 수 있습니다. 이 기사에서는 WeChat 미니 프로그램의 탭 구현을 소개합니다.

Idea

• 이전에 swiper를 기반으로 탭을 작성한 적이 있습니다. 미니 프로그램에 swiper 구성 요소가 있는데 여기서는 swiper 구성 요소가 사용된다는 것은 의심의 여지가 없습니다

• swiper에 문제가 있습니다. 콘텐츠는 높이에 적응하므로 wx.getSystemInfoSync를 통해 장치 높이를 가져와서 스위퍼 높이를 설정해야 합니다. 시각적 영역을 초과한 후에는 스크롤되므로 여기서는 또 다른 구성 요소 스크롤이 사용됩니다.

• 미니 프로그램의 스와이퍼 구성 요소 기능은 아직 상대적으로 제한되어 있어 최적화가 필요합니다.

솔루션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에서 루프의 탐색을 렌더링하세요.

4. 콘텐츠 표시 영역

콘텐츠 표시 영역은 swiper 항목 수는 탭 배열의 길이와 일치해야 합니다.

/*初始化样式*/
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 구성 요소에 문제가 있습니다. 콘텐츠에 따라 높이를 조정할 수 없으므로 [ wx.getSystemInfoSync][4] 장치 높이 가져오기 및 스와이프 높이 설정

애플릿이 시각적 영역을 초과하면 스크롤할 수 없으므로 여기서는 다른 구성 요소를 사용합니다[scroll-view][5].

스위퍼 구성 요소 높이와 스크롤 보기 높이를 설정하기 위해 onShow 함수의 getSystemInfoSync를 통해 장치의 너비와 높이를 가져옵니다

<!-- 内容开始 -->
<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>

5 콘텐츠를 전환하려면 탐색 모음을 클릭하세요

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

小程序中的swiper组件有个问题就是不能根据内容自适应高度，所以要通过[wx.getSystemInfoSync][4]获取设备高度设置swiper高度
小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示，所以这里要用到另一个组件[scroll-view][5]。6. 내비게이션 바 전환을 위한 콘텐츠

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

7. 스크롤 가능한 영역의 하단으로 스크롤하여 데이터를 새로고침하세요

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

아름다운 탭이 완성됩니다.

전체 사례

위 내용은 이 기사의 전체 내용입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 WeChat 미니 프로그램에서 탭을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!