更新记录

1.0(2019-09-18)

第一版


bottom-tabbar 底部tabbar,使用subNvue

注意,前提:项目编译模式为自定义组件模式,nvue编译模式为uni-app模式

使用方式:

  1. 在pages.json的页面上注册
    {
      "path": "pages/xxxxxxxx",
      "style": {
        "app-plus": {
          "subNVues": [
            {
              // 唯一标识
              "id": "bottomTabbar",
              // 引用组件路径
              "path": "components/xiao-bottom-tabbar/xiao-bottom-tabbar",              
              "style": {
                "position": "dock",//使用dock模式
                "dock": "bottom",//位置为页面底部
                "width": "750upx",//宽度为屏幕宽度
                "height": "99.75upx"//高度可调整
              }
            }
          ]
        }
      }
    }
  2. 修改组件内的源码内容(因为subNvue注册在pages里,不能由外部传入属性,所以使用时需要直接在源码上修改)
    定义list: [
          {
            text: "首页",//标题
            src: "/static/xiao-bottom-tabbar/mall_index.png",//未选中图标
            srcSelect: "/static/xiao-bottom-tabbar/mall_index_active.png",//选中图标
          }
        ],
    其他的源码都有注释,看着自定义吧~
  3. 事件传递机制使用的是uni.$emit、uni.$on,在页面监听tabbar的点击切换事件
    //subNvue只能在app端运行,最好使用ifdef条件编译,同时若需要其他端需另配置前端组件  
    // #ifdef APP-PLUS
    onLoad(){
            uni.$on("onBottomNavChange",(info)=>{
                const index = info.index;
                //拿到的info.index为点击项的数组下标;
                //执行操作逻辑。。。
            });
    },
    //别忘了页面销毁时要注销监听
    (){
          uni.$off("onBottomNavChange");
    },
    // #endif

    说明:参考了cmd-bottom-nav,感谢作者的奉献 刚刚学的前端和weex,还在摸索阶段。接下来希望加一下点击动画吧

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问