アプレットを開発する過程で、パーミッション ログインの問題が発生します. ロールが異なれば、ログイン後に下部のナビゲーション バーに異なるタブバーが表示されます. インターネットで多くのブログを見てきましたが、多かれ少なかれいくつかの落とし穴があり、問題が発生します。今日のブログは一発で解けます。
コンセプトを理解する
手順
app.json のカスタム フィールドを true として宣言します。
「カスタム」：真
"tabBar": {
"custom": true,
"selectedColor": "#3161ff",
"list": [
{
"pagePath": "pages/index/index",
"text": "检查",
"iconPath": "./assets/tabbar/check.png",
"selectedIconPath": "./assets/tabbar/check_select.jpg"
},
{
"pagePath": "pages/approval/index",
"text": "审批",
"iconPath": "./assets/tabbar/approval.png",
"selectedIconPath": "./assets/tabbar/approval_select.png"
},
{
"pagePath": "pages/mine/index",
"text": "我的",
"iconPath": "./assets/tabbar/me.png",
"selectedIconPath": "./assets/tabbar/me_select.png"
}
]
},
エントリ ファイルをルート ディレクトリに追加します。
ルート ディレクトリにcustom-tab-barという名前の新しいフォルダーを作成します(名前は変更しないでください)。
custom-tab-bar フォルダーを右クリックし、新しいコンポーネントを作成し、名前をindexにします (これは変更できません。すべての公式要件であり、変更後に表示できません)。
コードを書く
カスタムタブバー/index.wxml
<!--custom-tab-bar/index.wxml-->
<view class="tab-bar">
<view class="tab-bar-border"></view>
<view wx:for="{
{selectList}}" wx:key="index" class="tab-bar-item" data-path="{
{item.pagePath}}" data-selected="{
{item.selected}}" bindtap="switchTab">
<image class="cover-image" src="{
{selected === item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<view class="cover-view" style="color: {
{selected === item.selected ? selectedColor : color}}">{
{item.text}}</view>
</view>
</view>
カスタムタブバー/index.wxss
/* custom-tab-bar/index.wxss */
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
background-color: rgba(0, 0, 0, 0.33);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-item .cover-image {
width: 44rpx;
height: 44rpx;
}
.tab-bar-item .cover-view {
margin-top: 8rpx;
font-size: 24rpx;
}
カスタムタブバー/index.js
// custom-tab-bar/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
selectedColor: "#3161ff",
allList: [
[{
"pagePath": "/pages/index/index",
"text": "检查",
"iconPath": "../assets/tabbar/check.png",
"selectedIconPath": "../assets/tabbar/check_select.jpg",
"selected": "index"
},
{
"pagePath": "/pages/mine/index",
"text": "我的",
"iconPath": "../assets/tabbar/me.png",
"selectedIconPath": "../assets/tabbar/me_select.png",
"selected": "mine"
}
],
[{
"pagePath": "/pages/index/index",
"text": "检查",
"iconPath": "../assets/tabbar/check.png",
"selectedIconPath": "../assets/tabbar/check_select.jpg",
"selected": "index"
},
{
"pagePath": "/pages/approval/index",
"text": "审批",
"iconPath": "../assets/tabbar/approval.png",
"selectedIconPath": "../assets/tabbar/approval_select.png",
"selected": "approval"
},
{
"pagePath": "/pages/mine/index",
"text": "我的",
"iconPath": "../assets/tabbar/me.png",
"selectedIconPath": "../assets/tabbar/me_select.png",
"selected": "mine"
}
]
],
selectList: []
},
/**
* 生命周期方法
*/
attached() {
this.setData({
selectList: this.data.allList[1]
})
},
/**
* 组件的方法列表
*/
methods: {
switchTab(e) {
// console.log(e.currentTarget.dataset);
let path = e.currentTarget.dataset.path;
let selected = e.currentTarget.dataset.selected
// console.log(e.currentTarget.dataset.selected);
wx.switchTab({
url: path,
})
}
}
})
各ページの js ファイルの onShow メソッドに、次のコードを追加します。
ページ\承認\index.js
onShow() {
if(typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: "approval"
})
}
},
等々
ページ\インデックス\index.js
onShow() {
if(typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: "index"
})
}
}
pages\mine\index.js
onShow() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: "mine"
})
}
},
ここで選択された値は、allLIst 配列の選択されたフィールドに対応し、どちらが選択されても、色の変更と切り替えが実現されます。
説明
ここで行っているのはナビゲーション バーのカスタマイズなので、custom-tab-bar/index.wxml に表示されます。
for ループは選択された配列であり、配列の画像とテキストがレンダリングされます
custom-tab-bar/index.js の attachec ライフサイクルで選択された selectList: this.data.allList[1]/selectList: this.data.allList[0] を介して異なるタブバーを切り替えます。
選択されたフィールドの選択されたフィールドのいずれかが、色の変化とスイッチを実現します。
説明
ここで行っているのはナビゲーション バーのカスタマイズなので、custom-tab-bar/index.wxml に表示されます。
for ループは選択された配列であり、配列の画像とテキストがレンダリングされます
custom-tab-bar/index.js の attachec ライフサイクルで選択された selectList: this.data.allList[1]/selectList: this.data.allList[0] を介して異なるタブバーを切り替えます。
キャラクター情報をまだ作っていない小さなデモなので、実際に開発を行う際に取得したキャラクターIDを判断して、どのリストをレンダリングするかを判断することができます