收藏
回答

自定义 tabBar 在切换 tab闪屏?

自定义 tabBar 切换 tab在加载时闪屏,有没有好的解决办法,?


回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员-灵芝
    社区技术运营专员-灵芝
    2019-08-29

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-08-29
    赞同
    回复 8
    • Yhong
      Yhong
      2019-08-29

      组件wxml

      <view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
        <block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
         
          <navigator class="tabbar_nav"hover-stop-propagation hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
            <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
            <text>{{item.text}}</text>
          </navigator>
        </block>
      </view>


      组件js
      const app = getApp();
      Component({
        
          properties: {
              tabbar: {
                  type: Object,
                  value: {
                      "backgroundColor": "#ffffff",
                      "color": "#979795",
                      "selectedColor": "#1c1c1b",
                      "list": [{
                              "pagePath": "pages/bussiness/home/home",
                              "text": "tabbar一",
                              "iconPath": "images/tabbar/bussiness.png",
                              "selectedIconPath": "images/tabbar/bussiness_select.png"
                          },
                        
                          {
                              "pagePath": "/pages/message/message/message",
                              "iconPath": "/images/banner.png",
                              "isSpecial": true,
                              "text": "tabbar三"
                          },
                          {
                              "pagePath": "pages/card/card/card",
                              "text": "tabbar四",
                              "iconPath": "images/tabbar/find.png",
                              "selectedIconPath": "images/tabbar/find_select.png"
                          },
                       
                      ]
                  }
              }
          },
       
        
      })


      app onlaunch

      onLaunch: function(options) {
           //隐藏系统tabbar
           wx.hideTabBar();
           //获取设备信息
           this.getSystemInfo();
        
       },

      app.js

      getSystemInfo: function () {
            let t = this;
            wx.getSystemInfo({
                success: function (res) {
                    t.globalData.systemInfo = res;
                }
            });
        },
        editTabbar: function () {
            let tabbar = this.globalData.tabBar;
            let currentPages = getCurrentPages();
            let _this = currentPages[currentPages.length - 1];
            let pagePath = _this.route;
            (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
            for (let i in tabbar.list) {
                tabbar.list[i].selected = false;
                (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
            }
            _this.setData({
                tabbar: tabbar
            });
        },


      2019-08-29
      回复
    • Yhong
      Yhong
      2019-08-29
      这个问题在最新版开发者工具就可以复现
      2019-08-29
      回复
    • 社区技术运营专员-灵芝
      社区技术运营专员-灵芝
      2019-08-29回复Yhong
      你的工具版本和基础库是多少呢?麻烦按上述格式提供一下代码片段哈
      2019-08-29
      回复
    • Yhong
      Yhong
      2019-08-29
      工具版本1.02.1907300 基础库2.8.0
      2019-08-29
      回复
    • 社区技术运营专员-灵芝
      社区技术运营专员-灵芝
      2019-08-29回复Yhong
      试试2.8.1的基础库
      2019-08-29
      回复
    查看更多(3)
  • var 友原
    var 友原
    2019-08-29

    https://developers.weixin.qq.com/community/develop/doc/0006045c4400b898e588b24035b014?_at=1567045628714

    2019-08-29
    赞同
    回复 3
    • Yhong
      Yhong
      2019-08-29
      这个只说了问题,有解决问题吗?
      2019-08-29
      回复
    • 陈式坚
      陈式坚
      2019-09-05回复Yhong
      没有办法的 所以现在都不用自定义的
      2019-09-05
      1
      回复
    • Yhong
      Yhong
      2019-09-05回复陈式坚
      恩恩,体验效果不是太好
      2019-09-05
      回复
登录 后发表内容
问题标签