参考ドキュメント: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
背景: アプレットによって生成されるデフォルトのタブバーは希望のスタイルをカスタマイズできないため、新しいタブバーを作成する必要がありますが、作成したエクスペリエンスはページが切り替わるたびにちらつき、エクスペリエンスはあまり良くありません。より良いタブバー モードでは、WeChat アプレットがカスタマイズできるドキュメントであることがわかりました。一緒に見てみましょう。
- まず、app.json の tabBar 項目でカスタム フィールドを指定する必要があり、残りの tabBar 関連の構成も完了します。
- usingComponents 項目はすべてのタブ ページの json で宣言する必要があり、app.json でグローバルに有効にすることもできます。
- コードのルートディレクトリにtabBarコードファイルを追加します
custom-tab-bar
(ファイル名は固定かどうかわかりませんが、アプレットのドキュメントを参照してください)
这个有个弊端就是第一次还是会闪烁,后续都不会啦~
カスタム タブ バー ファイルのデモは次のとおりです:
index.wxml
<view class="my_tab">
<view class="item-tab" wx:for="{
{list}}" wx:key="index" data-path="{
{item.pagePath}}" data-name="{
{item.text}}" data-index="{
{index}}" bindtap="switchTab" style="color:{
{selected==index?'#1A1C36':'#8C8E9B'}}">
<image class="img" mode="heightFix" src="{
{selected==index?item.selectedIconPath:item.iconPath}}" />
<view>{
{item.text}}</view>
</view>
</view>
インデックス.wxss
/* pages/my_tab.wxss */
.my_tab {
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
display: flex;
background-color: #FFFFFF;
line-height: 20rpx;
font-size: 20rpx;
box-shadow: 0px -1px 0px 0px #E3E4E7;
/* overflow: hidden; */
padding-bottom: env(safe-area-inset-bottom);
}
.my_tab .item-tab {
flex: 1;
text-align: center;
}
.my_tab .img {
width: 48rpx;
height: 48rpx;
display: block;
margin: 14rpx auto 4rpx;
}
インデックス.js
这里的list需要跟app.json下的tabBar中list保持一致,图片路径引入比那边多个/
在切换时只需要这个加switchTab就可以,两边都加会出现闪烁
Component({
data: {
selected: 0,
"color": "#8C8E9B",
"selectedColor": "#1A1C36",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "/pages/home/index",
"iconPath": "/utils/assets/tab1.png",
"selectedIconPath": "/utils/assets/tab1-select.png",
"text": "爱车"
},
{
"pagePath": "/pages/activityHome/index",
"iconPath": "/utils/assets/activity.png",
"selectedIconPath": "/utils/assets/activity-select.png",
"text": "活动"
},
{
"pagePath": "/pages/me/index",
"iconPath": "/utils/assets/tab2.png",
"selectedIconPath": "/utils/assets/tab2-select.png",
"text": "我的"
}
]
},
attached() {},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
if (data.index !== this.data.selected) {
const url = data.path
getApp().$$Rangers.event('bottom_nav', {
'bottom_nav_name': data.name
});
wx.switchTab({
url
})
// this.setData({
// selected: data.index
// })
}
}
}
})
対応するジャンプ ファイルのデモ:
Component({
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0 // 这个对应list数组中的下标
})
// 下面就跟正常写页面一样啦~~~~~~
}
}
},
data:{},
onload(){}
})
他の人ができることは、私たちにもできる、さあ!!!