美文网首页
framework7 tabbar样式风格统一

framework7 tabbar样式风格统一

作者: 桥下醉翁 | 来源:发表于2020-02-18 16:31 被阅读0次
    framework7框架,存在md、iOS两种风格。
    但是tabbar的iOS风格,没有md风格展示优美,所以需要调整iOS风格。
    framework.bundle.js文件
    1、搜索class .tab-link-highlight,找到setHighlight()方法
    2、在setHighlight()方法中,删除 if (app.theme !== 'md') { return; } 判断
    3、搜索setHighlight()方法调用,找到 if (app.theme === 'md' && app.toolbar) {} 判断,删除app.theme === 'md' 判断条件
    4、在setHighlight()方法,最后一行增加代码 $highlightEl.css('width', highlightWidth).transform(("translate3d(" + highlightTranslate + ",0,0)"));
    5、重新刷新页面,即完成了iOS风格调整
    
    =====================================
    6、针对vue循环渲染,增加的兼容性操作
    var tabLinksCount = $tabbarEl.find('.tab-link').length;
    var tabsize = $tabbarEl.find("[tab-size]").attr("tab-size");
    if (typeof(tabsize) != 'undefined' && tabsize > tabLinksCount) {
        tabLinksCount = tabsize;
    }
    

    相关文章

      网友评论

          本文标题:framework7 tabbar样式风格统一

          本文链接:https://www.haomeiwen.com/subject/tydhrctx.html