如何从零开始拆解uni-app开发的vue项目（三）

前言：前两篇文章我们讲解了如何拆解uni-app开发的项目结构、实现前台数据的动态加载，今天讲一篇如何实现动态加载功能列表，以及美化界面。话不多说，直接先看源码：

 在用户成功登录后，会跳转到menu.vue菜单，

再次点击点检功能时，会进入点检的具体功能跳转菜单，我们的点检项目根据分类有日点检、周点检和年保养，如下图所示：

上面页面的源码是这样的

<template>
    <view class="dianjianmenu">
        <text class="example-info">设备保养与点检分为日保养，周保养，年保养三个分类，操作时请注意选择相应保养类型</text>
        <uni-section title="铆压设备" type="line"></uni-section>
        <uni-list>
            <uni-list-item title="铆压设备" rightText="日点检" note="产线操作" @click="myday()" link/>
            <uni-list-item title="铆压设备"  rightText="周点检" note="工程部操作" @click="myweek()" link/>
            <uni-list-item title="铆压设备"  rightText="年点检" note="工程部操作" @click="mymonth()" link/>
        </uni-list>
        <uni-section title="自动化设备" type="line"></uni-section>
        <uni-list>
            <uni-list-item title="自动化设备" rightText="日点检" note="产线操作" @click="zdhday()" link/>
            <uni-list-item title="自动化设备"  rightText="周点检" note="工程部操作" @click="zdhweek()" link/>
            <uni-list-item title="自动化设备"  rightText="年点检" note="工程部操作" @click="zdhmonth()" link/>
        </uni-list>
        <uni-section title="高低温设备" type="line"></uni-section>
        <uni-list>
            <uni-list-item title="高低温设备" rightText="日点检" note="产线操作" @click="gdwday()" link/>
            <uni-list-item title="高低温设备"  rightText="周点检" note="工程部操作" @click="gdwweek()" link/>
            <uni-list-item title="高低温设备"  rightText="年点检" note="工程部操作" @click="gdwmonth()" link/>
        </uni-list>
        <uni-section title="真空包装机" type="line"></uni-section>
        <uni-list>
            <uni-list-item title="真空包装机" rightText="日点检" note="产线操作" @click="zkday()" link/>
            <uni-list-item title="真空包装机"  rightText="周点检" note="工程部操作" @click="zkweek()" link/>
            <uni-list-item title="真空包装机"  rightText="年点检" note="工程部操作" @click="zkmonth()" link/>
        </uni-list>
        <uni-section title="充退磁设备" type="line"></uni-section>
        <uni-list>
            <uni-list-item title="充退磁设备" rightText="日点检" note="产线操作" @click="ctcday()" link />
            <uni-list-item title="充退磁设备"  rightText="周点检" note="工程部操作"@click="ctcweek()" link/>
            <uni-list-item title="充退磁设备"  rightText="年点检" note="工程部操作" @click=&#