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

  • 提桶跑路前一天——整理组件已关闭评论
  • 21 次浏览
  • A+
所属分类:Web前端
摘要

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

闲聊:

小颖今年四月底从西安跑到深圳来找工作,本来想着好好赚钱还房贷,结果快转正了被通知要么无薪待岗,要么办理离职,嗯~ 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

<template>     <view class="content w-h-100">         <menu-list :comList="comList" />     </view> </template>  <script> import menuList from '@/components/menu-list.vue'; export default {     components: {         menuList     },     data() {         return {             comList: [                 { id: 1, name: '排名进度条', img: '/static/img/progress-icon.svg', url: '/pages/show-com/show-com?type=progress' },                 { id: 2, name: '回到顶部', img: '/static/img/to-top.svg', url: '/pages/show-com/show-com?type=toTop' },                 { id: 3, name: '日期', img: '/static/img/date-time.svg', url: '/pages/show-com/show-com?type=Time' },                 { id: 4, name: '锚点定位', img: '/static/img/map-fill.svg', url: '/pages/show-com/show-com?type=aimingPosition' }             ]         };     },     onLoad() {},     methods: {} }; </script>  <style lang="scss" scoped> .content {     background-color: $uni-bg-color-grey; } </style>

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

<template>     <!-- 报表组件 -->     <view class="content w-h-100"><menu-list :comList="comList" /></view> </template>  <script> import menuList from '@/components/menu-list.vue'; export default {     components: {         menuList     },     data() {         return {             comList: [                 { id: 1, name: '饼状图', img: '/static/img/pie-icon.svg', url: '/pages/show-com/show-com?type=pieEchart' },                 { id: 2, name: '柱状图', img: '/static/img/bar-icon.svg', url: '/pages/show-com/show-com?type=barEchart' },                 { id: 3, name: '混合图', img: '/static/img/bar-line-icon.svg', url: '/pages/show-com/show-com?type=barLineEChart' }                 // { id: 4, name: '堆叠', img: '/static/img/map-fill.svg' }             ]         };     },     methods: {} }; </script>  <style></style>

菜单组件:menu-list.vue

<template>     <view class="menu-list-box flex-row">         <view class="list-item" :key="dt.id" v-for="dt in comList" @click="changePage(dt.url)">             <view class="center-jus"><image class="img" :src="dt.img"></image></view>             <view class="menu-name">{{ dt.name }}</view>         </view>     </view> </template>  <script> export default {     props: {         comList: {             type: Array,             required: true         }     },     data() {         return {};     },     methods: {         changePage(url) {             uni.navigateTo({url});         }     } }; </script>  <style lang="scss" scoped> .menu-list-box {         padding-top: 30rpx;         margin-left: 32rpx;         .list-item {             border-radius: 12rpx;             height: 170rpx;             flex: 2;             background-color: $uni-bg-color;             margin: 16rpx 32rpx 16rpx 0;                          image {                 width: 90rpx;                 height: 90rpx;                 margin: 20rpx 0 10rpx 0;             }         }         .menu-name {             font-size: 28rpx;             width: 100%;             text-align: center;         }     } </style>

加载组件的:show-com.vue

<template>     <!-- 展示组件 -->     <view class="charts-content w-h-100">         <!-- 进度条 -->         <view v-if="showCom == 'progress'">             <ranking-prog :unitType="2" :rankList="rankingData" unitTxt="个" />             <ranking-prog :unitType="1" :rankList="rankingData" unitTxt="亿" />         </view>         <!-- 回到顶部 -->         <view v-if="showCom == 'toTop'">             <scroll-view class="scroller-box" scroll-y="true" scroll-with-animation="true" :scroll-top="scrollTopNum" @scroll="scrollFun">                 <view class="scroller-content"></view>                 <!-- 回到顶部 -->                 <scroll-top :showToTop="showToTops" @goTopFun="goTopFun" />             </scroll-view>         </view>         <!-- 瞄点定位 -->         <view v-if="showCom == 'aimingPosition'" class="aiming-position-box">             <uni-data-select v-model="toView" :localdata="anchorPoints" @change="changeFun" />             <scroll-view class="scroller-box" scroll-y="true" scroll-with-animation="true" :scroll-into-view="toView">                 <view id="anchor1" class="has-back">内容模块1</view>                 <view id="anchor2" class="has-back">内容模块2</view>                 <view id="anchor3" class="has-back">内容模块3</view>             </scroll-view>         </view>         <!-- 日期 -->         <view v-if="showCom == 'Time'" class="show-time-com">             <!-- 不支持设置默认时间 -->             <view class="flex-row">                 <view class="row-item">                     <view class="flex-row">                         <view class="row-item"><text class="time-type-txt">日期类型:</text></view>                         <view class="row-item"><uni-data-select v-model="timePram.timeType" :localdata="timeTypeList" @change="changeType" /></view>                     </view>                 </view>                 <view class="row-item"><select-dt :timeType="timePram.timeType" :endTime="true" @getStartT="getStartTime" @getEndT="getEndTime" /></view>             </view>             <text v-if="timePram.timeType">所选日期:{{ timePram.startTime }}-{{ timePram.endTime }}</text>         </view>         <!-- 饼状图 -->         <pie-echart v-if="showCom == 'pieEchart'" :pieCanvasId="'chartsPie'" :pieChartData="ChartData" ref="chartsPie" />         <!-- 柱状图 -->         <bar-echart v-if="showCom == 'barEchart'" :barCanvasId="'columnCanvas'" :barChartData="ChartData" :ontouch="true" />         <!-- 折现+柱状混合图 -->         <barLineEChart v-if="showCom == 'barLineEChart'" :chartData="ChartData" />     </view> </template>  <script> import rankingProg from '@/components/ranking-progress/ranking-progress.vue'; import scrollTop from '@/components/scrollTop/scrollTop.vue'; import selectDt from '@/components/select-date/select-date.vue'; import pieEchart from '@/components/echartsCom/pie-y.vue'; import barEchart from '@/components/echartsCom/bar-charts.vue'; import barLineEChart from '@/components/echartsCom/bar-line-charts.vue'; import { pieChart } from '@/utils/echarts.config.js'; import moment from '@/static/js/moment.min.js'; export default {     name: 'show-com',     components: {         rankingProg,         scrollTop,         selectDt,         pieEchart,         barEchart,         barLineEChart     },     data() {         return {             showCom: 'pieEchart',             ChartData: {},             rankingData: [],             oldScrollNum: 0,             scrollTopNum: 0,             showToTops: false,             toView: '',             anchorPoints: [{ value: 'anchor1', text: '内容模块1' }, { value: 'anchor2', text: '内容模块2' }, { value: 'anchor3', text: '内容模块3' }],             timePram: {                 timeType: 'day',                 startTime: '',                 endTime: '',                 startTimeTxt: '',                 endTimeTxt: ''             },             timeTypeList: [{ value: 'day', text: '日' }, { value: 'month', text: '月' }, { value: 'quarter', text: '季度' }, { value: 'year', text: '年' }]         };     },     onLoad(option) {         let type = option.type,             _title = '';         this.showCom = type;         switch (type) {             case 'progress':                 _title = '组件-排名进度条';                 this.initProgress();                 break;             case 'toTop':                 _title = '组件-回到顶部';                 this.initBarChar();                 break;             case 'Time':                 _title = '组件-日期';                 this.initTimeCom();                 break;             case 'aimingPosition':                 _title = '组件-锚点定位';                 break;             case 'pieEchart':                 _title = '组件-饼图';                 this.initPieChar();                 break;             case 'barEchart':                 _title = '组件-柱状图';                 this.initBarChar();                 break;             case 'barLineEChart':                 _title = '组件-折线+柱状图';                 this.initBarLineEChart();                 break;         }         uni.setNavigationBarTitle({             title: _title         });     },     methods: {         initProgress() {             this.rankingData = [                 {                     name: 'XXXXXXXXXXXXXXXX银行分理处1',                     percentage: 82,                     num: 385                 },                 {                     name: 'XXXXXXX中国银行分理处2',                     percentage: 80,                     num: 345                 },                 {                     name: '中国工商银行雄县支行3',                     percentage: 70,                     num: 233                 },                 {                     name: '容城县津海大街光大银行分理处4',                     percentage: 55,                     num: 214                 },                 {                     name: '农业银行雄县支行5',                     percentage: 40,                     num: 128                 },                 {                     name: '农业银行雄县支行6',                     percentage: 40,                     num: 128                 },                 {                     name: '容城闲罗萨大街中国银行分理处7',                     percentage: 80,                     num: 345                 },                 {                     name: '中国工商银行雄县支行8',                     percentage: 70,                     num: 233                 },                 {                     name: '容城县津海大街光大银行分理处9',                     percentage: 55,                     num: 214                 },                 {                     name: '农业银行雄县支行10',                     percentage: 40,                     num: 128                 },                 {                     name: '2农业银行雄县支行11',                     percentage: 40,                     num: 128                 }             ];         },         scrollFun(e) {             this.oldScrollNum = e.detail.scrollTop;             if (this.oldScrollNum > 500 || this.oldScrollNum == 500) {                 this.showToTops = true;             } else {                 this.showToTops = false;             }         },         // 回滚到顶部         goTopFun(v) {             // 解决view层不同步的问题             this.scrollTopNum = this.oldScrollNum;             this.$nextTick(() => {                 this.scrollTopNum = 0;             });         },         initTimeCom() {             this.timePram.startTime = moment(new Date().getTime()).format('YYYY-MM-DD');             this.timePram.endTime = this.timePram.startTime;         },         getStartTime(time) {             this.timePram.startTime = time._time;             this.timePram.startTimeTxt = time.timeY;             console.log('开始时间', time);         },         getEndTime(time) {             this.timePram.endTime = time._time;             this.timePram.endTimeTxt = time.timeY;             console.log('结束时间', time);         },         changeType(value) {             this.timePram.timeType = value;         },         changeFun(id) {             if (!id) {                 return;             }             let anchorId = id;             setTimeout(() => {                 this.$nextTick(() => {                     this.toView = anchorId;                 });             }, 1000);         },         initPieChar() {             setTimeout(() => {                 this.ChartData = JSON.parse(JSON.stringify(pieChart.series));                 this.ChartData.series[0].data = [{ name: '缴存', value: 200 }, { name: '提取', value: 200 }, { name: '贷款', value: 201 }];                 this.$refs.chartsPie.pieEopts.title.text = '本月检核问题类型占比';             }, 500);         },         initBarChar() {             //模拟从服务器获取数据时的延时             setTimeout(() => {                 //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接                 let res = {                     categories: ['202108', '202109', '202110', '202111', '202112', '202201', '202202', '202203', '202204', '202205', '202206', '202207'],                     series: [                         {                             name: '问题数量',                             data: [990, 850, 790, 700, 700, 450, 700, 650, 590, 580, 550, 570]                         }                     ]                 };                 this.ChartData = JSON.parse(JSON.stringify(res));             }, 500);         },         initBarLineEChart() {             setTimeout(() => {                 let res = {                     categories: ['2016', '2017', '2018', '2019', '2020', '2021'],                     series: [                         { name: '发放金额', type: 'column', data: [70, 90, 88, 88, 65, 78] },                         { name: '同期发放金额', type: 'column', data: [50, 58, 56, 58, 43, 55] },                         { name: '同比增长率', index: 1, type: 'line', data: [-2, -6, 4, 3, 4, 0], addPoint: true },                         { name: '环比增长率', index: 1, type: 'line', data: [-5, -9, 5, -5, -14, 0], addPoint: true }                     ]                 };                 this.ChartData = JSON.parse(JSON.stringify(res));             }, 500);         }     } }; </script>  <style lang="scss" scoped> .charts-content {     /deep/.ranking-progress-box {         padding: 20rpx 32rpx;     }     .row-item {         flex: 1;         .time-type-txt {             height: 70rpx;             line-height: 70rpx;         }     }     .show-time-com {         padding-top: 50rpx;         padding: 50rpx 32rpx 0 32rpx;     }     .scroller-box {         height: 1600rpx;         .scroller-content {             height: 1500px;             background-color: aliceblue;         }     }     .aiming-position-box {         .scroller-box {             height: 1500rpx;         }     }     .has-back {         height: 800rpx;         width: 100%;         background-color: antiquewhite;     }     #anchor2 {         background-color: paleturquoise;     }     #anchor3 {         background-color: greenyellow;     } } </style>

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

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

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

菜单效果图:

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