闲聊：
小颖今年四月底从西安跑到深圳来找工作，本来想着好好赚钱还房贷，结果快转正了被通知要么无薪待岗，要么办理离职，嗯~ o(￣▽￣)o………………………… 想骂人咋办 ？
小颖之前没怎么写过小程序，到这边后接手了离职小姐姐的工作，看代码、看api、自己试着建项目，后面摸索着根据需求开发前端静态页面，一边写还要一边和产品沟通，说的是按PC端开发移动端，但产品给的原型和PC端差异很大，有的是Pc端没有按他当时给的需求写，有的是产品遗漏了······，反正写的时候是真费劲，后来组里又招了个前端，不过我的队友有自己的想法，写的时候只看当前页面不封装不整理，也不调用别人写的············，UI出来了也是不按UI的来写个大概的样式，然后他负责的模块前端进度就是一排排的
偷偷向下看： 其实想想我这还好不算惨，我们另一个组和我一起入职的男生，刚被上一家释放，来这边快转正了又遇到释放·············这更惨，所以想想也就不那么难过啦，所以不要觉得自己过的不如意，过得不如意时看看比自己惨的就突然释怀了，觉得自己也没那么惨了，也就没那么焦虑啦。
无薪待岗 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
for="dt in comList" @click="changePage(dt.url)">
{{ dt.name }}
加载组件的：show-com.vue
if="showCom == 'progress'">
if="showCom == 'toTop'">
with-animation="true" :scroll-top="scrollTopNum" @scroll="scrollFun">
if="showCom == 'aimingPosition'" class="aiming-position-box">
with-animation="true" :scroll-into-view="toView">
内容模块1
内容模块2
内容模块3
if="showCom == 'Time'" class="show-time-com">
日期类型：
if="timePram.timeType">所选日期：{{ timePram.startTime }}-{{ timePram.endTime }}
if="showCom == 'pieEchart'" :pieCanvasId="'chartsPie'" :pieChartData="ChartData" ref="chartsPie" />
if="showCom == 'barEchart'" :barCanvasId="'columnCanvas'" :barChartData="ChartData" :ontouch="true" />
if="showCom == 'barLineEChart'" :chartData="ChartData" />
瞄点定位那个小颖没有提成组件，其实就是 下拉框 和 scroll-view的结合 ，需要注意： scroll-view 要给高 并且里面的小模块的高加起来要大于 scroll-view 的 高，这样才能滚起来
回到顶部那个也是需要注意scroll-view 设定高，不然不会触发它的 @scroll 事件
其他组件麻烦大家移步：comp-y
菜单效果图：
Original: https://www.cnblogs.com/yingzi1028/p/16640499.html
Author: 爱喝酸奶的吃货
Title: 提桶跑路前一天——整理组件
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/803802/
转载文章受原作者版权保护。转载请注明原作者出处！