6
提桶跑路前一天——整理组件 - 爱喝酸奶的吃货
source link: https://www.cnblogs.com/yingzi1028/p/16640499.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
提桶跑路前一天——整理组件
小颖今年四月底从西安跑到深圳来找工作，本来想着好好赚钱还房贷，结果快转正了被通知要么无薪待岗，要么办理离职，嗯~ 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
菜单效果图：
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK