提桶跑路前一天——整理组件

闲聊：

小颖今年四月底从西安跑到深圳来找工作，本来想着好好赚钱还房贷，结果快转正了被通知要么无薪待岗，要么办理离职，嗯~ o(*￣▽￣*)o.............................. 想骂人咋办 ？

小颖之前没怎么写过小程序，到这边后接手了离职小姐姐的工作，看代码、看api、自己试着建项目，后面摸索着根据需求开发前端静态页面，一边写还要一边和产品沟通，说的是按PC端开发移动端，但产品给的原型和PC端差异很大，有的是Pc端没有按他当时给的需求写，有的是产品遗漏了······，反正写的时候是真费劲，后来组里又招了个前端，不过我的队友有自己的想法，写的时候只看当前页面不封装不整理，也不调用别人写的············，UI出来了也是不按UI的来写个大概的样式，然后他负责的模块前端进度就是一排排的

 给他说把一个模块改完了再弄下一个也不听········反正就是很有自己的想法，然后后面调接口时，他就开始吐槽他好忙，我也不知道怎么接话，我三个模块的接口都联调完了，他一个模块都没完，虽然领导要求我们1、2、4、6加班，但他的进度依旧真怕后面我把活干完了，他没干完领导让我给他擦屁股，这下要被劝退了就不用担心啦   所以这么想想就觉得其实还挺开心的，起码不用再和我的队友一起写代码了，毕竟现在跑哦那个比后面发现坑太多跑不急的好，那么希望我俩后面不要再面试同一家了，希望我们接下来找的工作都比现在的工资高、待遇好，加油💪

偷偷向下看：  其实想想我这还好不算惨，我们另一个组和我一起入职的男生，刚被上一家释放，来这边快转正了又遇到释放·············这更惨，所以想想也就不那么难过啦，所以不要觉得自己过的不如意，过得不如意时看看比自己惨的就突然释怀了，觉得自己也没那么惨了，也就没那么焦虑啦。

 

无薪待岗 or  离职  ，我当然选择离职啦，赶紧提桶跑路，那就在跑前把自己写的部分组件整理下，虽然不是什么复杂组件，但记录一下，方便以后找代码，不然靠脑子的话，怕是有点难为我自己，哈哈。那就上代码

1.创建小程序项目

具体怎么弄，请大家移步到：HBuilderx 创建 、运行uniapp项目 

2.初始化菜单

第一步：点击 page文件夹右键——>新建页面

根据自己的需求是否 注册、创建同名目录

第二步：在pages.json中配置小程序页面菜单和顶部导航栏标题

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "小组件",
                "navigationBarBackgroundColor": "#ffffff"
            }
        }, {
            "path": "pages/echarts-report/echarts-report",
            "style": {
                "navigationBarTitleText": "报表组件",
                "enablePullDownRefresh": false
            }

        }, {
            "path": "pages/show-com/show-com",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }

        }
    ],
    "tabBar": {
        // "height": "67px",
        "color": "#8F919F",
        "selectedColor": "#2F65DF",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
                "pagePath": "pages/index/index",
                // "iconPath": "./static/tabbar/tab_workbench_nromal.png",
                // "selectedIconPath": "./static/tabbar/tab_workbench_select.png",
                "text": "其他"
            },
            {
                "pagePath": "pages/echarts-report/echarts-report",
                // "iconPath": "./static/tabbar/tab_my_normal.png",
                // "selectedIconPath": "./static/tabbar/tab_my_select.png",
                "text": "报表"
            }
        ]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

其中   tabBar  中配置的底部导航信息，pages 中配置页面路由信息

第三步：开发页面

因为小颖的这个小程序里就只有两个菜单，俩菜单模块中点击进去后就开始渲染相应的组件，所以小颖就把他们拆分成两个菜单页和一个加载组件页，菜单页样式和交互方式一样所以，小颖把才对呢单独提了个组件，两个页面是各自底部导航点进入的页面，把渲染组件的页面用的同一页组件，具体怎么实现的呢，代码一个一个往上贴哈哈

目录：

小组件页面：index.vue

报表组件页面：echarts-report.vue

菜单组件：menu-list.vue

加载组件的：show-com.vue

瞄点定位那个小颖没有提成组件，其实就是  下拉框  和  scroll-view的结合 ，需要注意：  scroll-view  要给高   并且里面的小模块的高加起来要大于   scroll-view  的  高，这样才能滚起来 

回到顶部那个也是需要注意 scroll-view  设定高，不然不会触发它的  @scroll     事件

其他组件麻烦大家移步：comp-y

菜单效果图：