老师,关于自定义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

这样的问题 一般是逻辑引起的,自定义不会有这样的问题,需要调试下代码,不太可能看出来

1
0

纯正商业级微信小程序应用实战,全方位小程序特性讲解

真实数据的高质量小程序项目,学会直接工作

4782 学习 · 2125 问题

查看课程