提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  APP

当前栏目

? ?的uniapp学习之? 【tabBar】

数组
2023-02-25 18:16:29 时间

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

这是官网描述的：✈️

  • 当设置 position 为 top 时，将不会显示 icon
  • tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
  • tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
  • tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
  • 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。 fontSize 修改字体大小 list 其中list是一个数组，数组中又是对象，对象的iconPath属性对应着我们要使用图标的路径。并且对这个图片有如下要求：icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标 midButton
  • 这个属性是中间的凸出按钮，因为上面提到过tabBar最少配置两个、最多五个。
  • 我们把midButton配置项加到了list后面，它们两个是同级的。
  • 当list(list中不需要把midButton的内容再写一遍)中有2或4项的时候(加上midButton是奇数项)的时候，这个中间按钮就会被加到中间。否则不显示。
  • tabBar是有默认高度的，我们最好还是给它定义高度，如果想要让midbutton凸出，那就需要midbutton的高度高于tabBar的高度。同时图标大小iconWidth也要大一些 
"tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#007AFF",
        "borderStyle": "#f7fcfe",
        "spacing":"1px",
        "position":"bottom",
        "backgroundColor": "#f7fcfe",
        // "fontSize": "15px",
        "list": [{
                "pagePath": "pages/tabBar/Home/Home",
                // "iconPath": "static/component.png",
                // "selectedIconPath": "static/componentHL.png",
                "text": "首页"
            },
            {
                "pagePath": "pages/tabBar/component/component",
                "iconPath": "static/component.png",
                "selectedIconPath": "static/componentHL.png",
                "text": "内置组件"
            },
            {
                "pagePath": "pages/tabBar/extUI/extUI",
                "iconPath": "static/extui.png",
                "selectedIconPath": "static/extuiHL.png",
                "text": "扩展组件"
            }, {
                "pagePath": "pages/tabBar/template/template",
                "iconPath": "static/template.png",
                "selectedIconPath": "static/templateHL.png",
                "text": "模板"
            }
        ],
        "midButton": {
            "pagePath": "pages/tabBar/API/API",
            "iconPath": "static/icon/record.png",
            "width": "70px",
            "height": "69px",
            "iconWidth": "50px",
            "text": "发布"
        }
            }

图片可以去iconfont中下载✈️ [?]图片大小最好80*80 并且不大于40kb 看一下效果

如果不需要图标，去掉此配置项即可。

midButton跳转

App.vue文件夹中加入监听事件

  • 其中onLaunch是初始化的生命周期、
  • uni.onTabBarMidButtonTap是MidButton的的监听事件。
  • uni.navigateTo是路由跳转（注意路由最前面一定要用 / ）
  • onShow是进入前端时的生命周期
  • onHide是从前端进入后端的生命周期
<script>
    export default {
        // 初始化生命周期
        onLaunch: function() {
            // 监听事件
            uni.onTabBarMidButtonTap(() => {
                // 注意路由带 /
                uni.navigateTo({
                    url: '/pages/publish/publish',
                });
            })
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

现在点击按钮就会跳转。这个跳转的路由对应的页面一定要在pages.json中的page配置项中注册。

相关文章