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

闲聊:

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

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

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

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

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

 

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

1.创建小程序项目

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

2.初始化菜单

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

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

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

第二步:在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 中配置页面路由信息

第三步:开发页面

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

目录:

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

小组件页面:index.vue





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





菜单组件:menu-list.vue





加载组件的:show-com.vue





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

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

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

菜单效果图:

提桶跑路前一天——整理组件插图4                                  提桶跑路前一天——整理组件插图5

 

文章来源于互联网:提桶跑路前一天——整理组件

THE END
分享
二维码