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 つの値があります。これら 4 つの値は個別に使用することも、同時に使用することもできます。同時に使用する場合はスペースで区切ってください（実際には対応するタグのclass属性に埋め込まれます）。それらの機能は次のとおりです。
choose 属性には、enable と disable の 2 つの値があり、デフォルトは Enable です。無効に設定されている場合、ラベル項目をクリックしてもラベル バーの選択状態は変更されませんが、変更イベントはトリガーされます。
bindchange属性を使用して、リスニング イベントをバインドします。
<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>
次に、Page() に listen メソッドを実装します。
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 2 つのデータを取得します。このうち、e.detail.key は data 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',
})
}
}
