老师,关于自定义tabbar栏的样式切换问题
来源:7-5 访问API获取数据

wuli七里香
2020-03-09
老师你好,我自定义的tabar栏,页面可以正常切换,样式却需要点两次才能切换,您有遇到过这种情况嘛
index.wxml
<!-- index.html -->
<!-- 自定义tabbar页面 -->
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view><!--tabBal边框样式 -->
<!-- 乐库tabbar -->
<cover-view class='tab-bar-item' >
<cover-image src='../images/music.png' hidden='{{isShow_index}}' bindtap='switchTab_index'></cover-image>
<cover-image src='../images/selected-music.png' hidden='{{!isShow_index}}' bindtap='switchTab_index'></cover-image>
<cover-view style="color:{{isShow_index ? selectedColor : color}}">乐库</cover-view>
</cover-view>
<!-- 播放tabbar -->
<cover-view class='tab-bar-item' bindtap='switchTab_playing'>
<cover-image src='../images/selected-playing.png' hidden='{{isShow_playing}}'></cover-image>
<cover-image src='../images/playing.png' hidden='{{!isShow_playing}}'></cover-image>
<cover-view></cover-view>
</cover-view>
<!-- 我的tabbar -->
<cover-view class='tab-bar-item' bindtap='switchTab_me'>
<cover-image src='../images/me.png' hidden='{{isShow_me}}'></cover-image>
<cover-image src='../images/selected-me.png' hidden='{{!isShow_me}}'></cover-image>
<cover-view style="color:{{isShow_me ? selectedColor : color}}">我的</cover-view>
</cover-view>
</cover-view>
index.js
// index.js
Component({
data: {
isShow_index: true,
isShow_playing: false,
isShow_me: false,
selected: 0, //首页
color: "#8D8D8D",
selectedColor: "#C62F2F",
list: [{
pagePath: "/pages/find/find",
iconPath: "/images/music.png",
selectedIconPath: "/images/selected-music.png",
text: "乐库"
}, {
pagePath: "/pages/friend/friend",
iconPath: "/images/selected-playing.png",
selectedIconPath: "/images/playing.png",
text: ""
},
{
pagePath: "/pages/mine/mine",
iconPath: "/images/me.png",
selectedIconPath: "/images/selected-me.png",
text: "我的"
}]
},
methods: {
switchTab_index: function () {
wx.switchTab({
url: '/pages/find/find'
})
this.setData({
isShow_index: true,
isShow_me: false,
isShow_playing: false
})
},
switchTab_playing: function () {
wx.switchTab({
url: '/pages/friend/friend'
})
this.setData({
isShow_playing: true,
isShow_index: false,
isShow_me: false
})
},
switchTab_me: function () {
wx.switchTab({
url: '/pages/mine/mine'
})
this.setData({
isShow_me:true,
isShow_playing: false,
isShow_index: false
})
}
}
})
app.json
{
"pages": [
"pages/find/find",
"pages/friend/friend",
"pages/mine/mine",
"pages/video/video"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black",
"navigationStyle": "default"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"tabBar": {
"custom": true,
"color": "#8D8D8D",
"selectedColor": "#DC4238",
"backgroundColor": "#f6f6f8",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/find/find",
"text": "乐库",
"iconPath": "images/music.png",
"selectedIconPath": "images/selected-music.png"
},
{
"pagePath": "pages/friend/friend",
"text": "收藏",
"iconPath": "images/love.png",
"selectedIconPath": "images/selected-love.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "images/me.png",
"selectedIconPath": "images/selected-me.png"
}
]
},
"usingComponents": {
}
}
写回答
1回答
-
7七月
2020-03-09
这样的问题 一般是逻辑引起的,自定义不会有这样的问题,需要调试下代码,不太可能看出来
10
相似问题