オリジナルウィジェットカスタムtabBar
14087 ワード
オリジナルウィジェットカスタムtabBar
手順:
1.構成情報
2.tabBarコードファイルを追加する(このフォルダはすべて追加する)
公式サイトに行くことができます:ガイドの中にカスタムtabBarがあって、中に方法があります
[外部リンク画像の転送に失敗しました.ソース局には盗難防止チェーン機構がある可能性があります.画像を保存して直接アップロードすることをお勧めします(img-OhuFNlnk-1593522300892)(C:UserslAppDataRoamingTyporatypora-user-imagesimage-206304716857.png)]
3.このフォルダで内容を修正する
index.js:::
index.json::::
index.wxml:::
4.ジャンプのバグを修正する::::(公式コンポーネントがもたらすバグ)
app.jsに追加
同時に、ジャンプが必要なページごとにonShowライフサイクル関数に次のように書きます.
手順:
1.構成情報
app.json
のtabBar
項では、custom
フィールドが指定され、残りのtabBar
関連構成も補完されます.{
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "page/component/index",
"text": " "
}, {
"pagePath": "page/API/index",
"text": " "
}]
},
"usingComponents": {}
}
2.tabBarコードファイルを追加する(このフォルダはすべて追加する)
公式サイトに行くことができます:ガイドの中にカスタムtabBarがあって、中に方法があります
[外部リンク画像の転送に失敗しました.ソース局には盗難防止チェーン機構がある可能性があります.画像を保存して直接アップロードすることをお勧めします(img-OhuFNlnk-1593522300892)(C:UserslAppDataRoamingTyporatypora-user-imagesimage-206304716857.png)]
3.このフォルダで内容を修正する
index.js:::
Component({
data: {
active: 0,
color: "#7A7E83",
selectedColor: "#3cc51f",
list: [{
"pagePath": "pages/home/home",
"text": "home",
"iconPath": "/assest/tabs/home.png",
"selectedIconPath": "/assest/tabs/home-active.png",
"icon": "home-o"
},
{
"pagePath": "pages/message/message",
"text": "message",
"iconPath": "/assest/tabs/message.png",
"selectedIconPath": "/assest/tabs/message-active.png",
"icon": "friends-o"
},
{
"pagePath": "pages/profile/profile",
"text": "profile",
"iconPath": "/assest/tabs/profile.png",
"selectedIconPath": "/assest/tabs/profile-active.png",
"icon": "setting-o"
}
]
},
onLoad() {
this.setData({
active: 0
})
}
,
attached() {
},
methods: {
switchTab(e) {
wx.switchTab({
url: "/" + this.data.list[e.detail].pagePath
})
}
}
})
index.json::::
{
"usingComponents": {
"van-tabbar": "../weapp/dist/tabbar",
"van-tabbar-item": "../weapp/dist/tabbar-item/index"
}
}
index.wxml:::
<van-tabbar active="{{ active }}" bind:change="switchTab">
<van-tabbar-item icon="{{item.icon}}" wx:for="{{list}}" data-path="{{item.pagePath}}" data-index="{{index}}"
wx:index="{{index}}">{{item.text}}
van-tabbar-item>
van-tabbar>
4.ジャンプのバグを修正する::::(公式コンポーネントがもたらすバグ)
app.jsに追加
globalData: {
host: ' http://localhost:3000/',
active: 0
}
同時に、ジャンプが必要なページごとにonShowライフサイクル関数に次のように書きます.
onShow: function () {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
active: 0// , 0 1.....
})
}
}