WeChat 애플릿의 하단 탐색 표시줄을 사용자 정의하는 방법을 단계별로 알려드립니다.

WeChat 애플릿의 하단 탐색 표시줄을 사용자 정의하는 방법은 무엇입니까? 다음 글에서는 하단 네비게이션 바를 맞춤 설정하는 구체적인 구현 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

WeChat은 유연한 하단 탐색 바를 구현하기 위해 사용자 정의 탐색 바를 지원합니다. 공식 문서에는 간단한 설명이 나와 있지만 너무 구체적이지는 않습니다. 여기서는 단계별 구체적인 설명을 통해 사용자 정의를 완료하도록 도와드리겠습니다. 코드 구현 하단 탐색 모음의 특정 구현을 정의합니다. [관련 학습 권장 사항: Mini 프로그램 개발 튜토리얼]

colorui 소개

https://github.com/weilanwl/ColorUI

이 웹 사이트를 방문하여 colorui 구성 요소 라이브러리를 다운로드하세요

다운로드 후 내려와서 데모 폴더에 있는 colorui 폴더를 애플릿 프로젝트에 넣어주세요

설정 소개

@import 'colorui/main.wxss';
@import 'colorui/icon.wxss';
@import 'colorui/animation.wxss';

위 코드를 app.wxss 파일에 넣으세요(위 코드에 따라 경로를 채워주세요) 실제 경로)

colorui 도입에 성공했습니다. 여기서는 colorui의 스타일 구성 요소를 사용하고 있습니다. 사실 다른 방법도 마찬가지거나 하단 탐색 모음의 스타일을 직접 작성할 수 있습니다. 사용자 정의 하단 탐색 모음 만들기 Components

먼저 사용자 정의 구성 요소 폴더 **custom-tab-bar를 만듭니다. **사용자 정의 하단 탐색 모음의 폴더 이름은 이 이름이어야 하며 다른 이름으로 변경할 수 없습니다. 애플릿이 인식되지 않습니다.

페이지 아래에 두 개의 페이지(home, my)를 생성합니다. 이 페이지는 탐색 표시줄에 대한 두 개의 전환 페이지로 사용됩니다.

app.json 파일 설정

미니 프로그램을 사용하지 마세요. 기본 탐색 모음 설정을 사용하려면 app.json 파일에서 tabBar의 사용자 정의 속성을 true로 설정해야 합니다

구체적인 코드는 다음과 같습니다.

"tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/icon/basics.png",
        "selectedIconPath": "images/icon/basics_cur.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/icon/component.png",
        "selectedIconPath": "images/icon/component_cur.png"
      }
    ]
  },

여기서 목록도 설정해야 한다는 점에 유의해야 합니다. 목록의 pagePath가 구성됩니다. 여기서는 탭을 두 개만 설정했기 때문에 탭을 여러 개 구성한 후 여기에 누락된 항목도 없습니다. pagePath, 목록의 다른 필드는 사용자 정의에 따라 구성할 수 있습니다. 더하기 및 빼기가 필요합니다.

네비게이션 바의 구체적인 코드 로직을 작성하세요

네비게이션 바 컴포넌트의 구체적인 구현1. 컴포넌트의 초기 데이터 설정

**// custome-tab-bar/index.js**
/**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    list: [{
        "pagePath": "/pages/home/home",
        "text": "首页",
        "iconPath": "/images/icon/basics.png",
        "selectedIconPath": "/images/icon/basics_cur.png"
      },
      {
        "pagePath": "/pages/my/my",
        "text": "我的",
        "iconPath": "/images/icon/component.png",
        "selectedIconPath": "/images/icon/component_cur.png"
      }
    ]
  }

여기서 보면 대략적인 것과 동일하다는 것을 알 수 있습니다. app.json에 설정되어 있지만 실제 목록 데이터는 실제로 app.json 대신 여기에서 얻습니다. 이것이 사용자 정의 구성 요소를 구현하는 핵심이므로 app.json이 사용되지 않는데 왜 필요한가요? app.json에 설정하려면 여기를 확인하세요. 이는 미니 프로그램의 표준 요구 사항이며 우리는 이를 준수할 수만 있습니다.

2. 컴포넌트 탐색 바 페이지 코드 구현

<!--custom-tab-bar/index.wxml-->
<view class="cu-bar tabbar">
  <view wx:for="{{list}}" wx:key="index" class="action" data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">
    <view class="cuIcon-cu-image">
      <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
    </view>
    <view class="text-green">{{item.text}}</view>
  </view>
</view>

사용된 colorui 스타일은

switchTab

이벤트를 통해 버튼 스타일 전환 효과를 얻기 위해 목록에 있는 각 데이터의 인덱스 비트를 비교합니다. 탭 페이지 전환을 달성합니다. 3. 컴포넌트 전환 이벤트 코드 구현

/**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
    
      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    }
  }

WeChat에서 제공하는 wx.switchTab 메소드를 호출하여 URL 점프를 완료하고, 당시 선택된 인덱스 값을 기록합니다.

이제 구성 요소에 대한 코드를 작성했으므로 특정 페이지에서도 버튼 전환을 위한 해당 논리를 설정해야 합니다

4. 탭별 페이지 코드 구현

// pages/my/my.js
/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onShow")
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1
      })
    }
  },

Selected는 onShow 값의 페이지 수명 주기 기능을 통해 설정됩니다. 내 페이지가 두 번째 탭이므로 색인 값이 1로 설정됩니다. 사용자 정의 구성 요소 WeChat에는 현재 페이지 아래에서 사용자 정의 tabBar 구성 요소 인스턴스를 가져온 다음 구성 요소에서 선택한 값을 설정할 수 있는 새로운 getTabBar 인터페이스가 있습니다. 홈페이지 설정은 동일하며, 실제 상황에 따라 인덱스 값을 점프할 수 있습니다.

최종 효과가 나타납니다

위 코드의 구현을 통해 전체 사용자 정의 하단 네비게이션 바가 구현됩니다. 실제로 전체적인 구현은 비교적 간단합니다. 효과를 살펴보겠습니다

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 WeChat 애플릿의 하단 탐색 표시줄을 사용자 정의하는 방법을 단계별로 알려드립니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!