WeChat 미니 프로그램에서 탭을 구현하는 방법-미니 프로그램 개발-php.cn

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

不言

풀어 주다： 2018-09-07 14:16:04

원래의

2797명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

Idea

onLoad 함수에 데이터를 채우세요

2. WXML

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

//滑动切换 swiperTab: function (e) { this.setData({ curIdx: e.detail.current }); },로그인 후 복사

전체 사례

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

//滑动切换 swiperTab: function (e) { this.setData({ curIdx: e.detail.current }); },
로그인 후 복사