weapp tabbar
1.0.0
텍스트가 없는 아이콘, 큰 아이콘, 플로팅 아이콘 등을 지원합니다.
소스코드 다운로드: https://github.com/tanggaowei/weapp-tabbar
사용자 정의 탭 표시줄 구성요소의 코드는 /commpents/tabbar 디렉토리에 있으며 다른 프로젝트에 직접 복사하여 사용할 수 있습니다. 다음은 사용 방법을 설명합니다.
탭 표시줄을 사용해야 하는 페이지의 json 파일에서 usingComponents 구성 항목을 사용하여 탭 표시줄 구성 요소를 참조합니다.
{
"usingComponents": {
"tabbar": "/components/tabbar/tabbar"
}
}
이제 wxml 파일에 구성 요소를 추가합니다.
<tabbar data="{{tabbar}}"></tabbar>
그런 다음 탭바와 같은 js 파일의 구성 요소 데이터를 정의합니다.
Page({
data: {
tabbar: {
"color": "#999999",
"selectedColor": "#7788dd",
"borderStyle": "#dcdcdc",
"backgroundColor": "#ffffff",
"list": [{
"key": "home",
"iconPath": "/images/icon_home.png",
"selectedIconPath": "/images/icon_home_active.png",
"text": "首页"
},
{
"key": "tag",
"iconPath": "/images/icon_tag.png",
"selectedIconPath": "/images/icon_tag_active.png",
"text": "标签"
},
{
"key": "new",
"iconPath": "/images/icon_plus_big.png",
"iconType": "big overflow circle shadow",
"choose": "disable"
},
{
"key": "notebook",
"iconPath": "/images/icon_notebook.png",
"selectedIconPath": "/images/icon_notebook_active.png",
"text": "日记本"
},
{
"key": "me",
"iconPath": "/images/icon_me.png",
"selectedIconPath": "/images/icon_me_active.png",
"text": "我"
}
]
}
}
})
사용자 정의 탭 표시줄 구성 요소의 데이터 형식은 미니 프로그램의 원래 탭 표시줄과 동일합니다. 여기서는 새로운 속성 iconType 의 사용에 중점을 두고 를 choose .
iconType에는 big , overflow , circle 및 shadow 총 4개의 값이 있습니다. 이 네 가지 값은 개별적으로 또는 동시에 사용할 수 있습니다. 동시에 사용할 경우 공백으로 구분합니다. (실제로는 해당 태그의 class 속성에 채워집니다.) 그 기능은 다음과 같습니다:
choose 속성에는 활성화와 비활성화라는 두 가지 값이 있으며 기본값은 활성화입니다. 비활성화로 설정된 경우 레이블 항목을 클릭하면 레이블 표시줄의 선택된 상태가 변경되지 않지만 변경 이벤트는 계속 트리거됩니다.
청취 이벤트를 바인딩하려면 bindchange 속성을 사용하십시오.
<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>
그런 다음 Page()에서 청취 메서드를 구현합니다.
tabChange: function(e) {
var key = e.detail.key
if (key == 'new') {
wx.navigateTo({
url: '/pages/new/new',
})
} else {
this.setData({
choose_index: e.detail.index
})
}
}
수신 방법은 e.detail.key 및 e.detail.index 두 가지 데이터를 가져옵니다. 그 중 e.detail.key는 데이터 tabbar.list 배열 요소의 키 값에 해당하는데, 이는 위의 home, tag, new, Notebook, me만큼 좋지 않습니다. e.detail.index는 0, 1, 2, 3, 4와 같은 배열 요소의 시퀀스 번호에 해당합니다.
사용자 정의 구성 요소는 페이지와 유사하며 자체 wxml 템플릿과 wxss 스타일을 갖고 있어 템플릿을 직접 사용하는 것보다 로직과 뷰를 쉽게 분리할 수 있습니다. 다음은 index.wxml의 사용자 정의 구성 요소를 사용하여 전환하기 위한 샘플 코드입니다.
<home wx:if="{{choose_index==0}}"></home>
<tag wx:if="{{choose_index==1}}"></tag>
<notebook wx:if="{{choose_index==3}}"></notebook>
<me wx:if="{{choose_index==4}}"></me>
<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>
그 중 <home> , <tag> , <notebook> , <me> 는 각각 고유한 기능을 구현하는 4가지 커스텀 컴포넌트입니다.
전환 효과는 템플릿을 사용하여 얻을 수도 있지만 논리 코드를 동일한 페이지에 작성해야 할 수도 있습니다. 예를 들어:
<import src='/template/home/home.wxml' />
<import src='/template/tag/tag.wxml' />
<import src='/template/notebook/notebook.wxml' />
<import src='/template/me/me.wxml' />
<template is="home" wx:if="{{choose_index==0}}"></template>
<template is="tag" wx:if="{{choose_index==1}}"></template>
<template is="notebook" wx:if="{{choose_index==3}}"></template>
<template is="me" wx:if="{{choose_index==4}}"></template>
<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>
페이지 콘텐츠를 전환하려면 청취 메소드에서 wx.navigateTo() 또는 wx.redirectTo() 인터페이스를 사용할 수 있습니다. 예를 들어:
tabChange: function(e) {
var key = e.detail.key
if (key == 'new') {
wx.navigateTo({
url: '/pages/new/new',
})
}
}
