uni-app列表组件 list组件,简单好用通用

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

 

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

 

本文给大家介绍的一款组件是：

前端vue uni-app列表组件 list组件,简单好用通用;

效果图如下：

 

 

#### 使用方法

```使用方法

      <!--  proList: 条目数组数据  goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->

            <CCListView :proList="projectList" @click="goProDetail"></CCListView>

```

#### HTML代码部分

<template>

    <view class="content">

        <!-- 列表组件 -->

        <div class="mui-content-padded">

            <!--  proList: 条目数组数据  goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->

            <CCListView :proList="projectList" @click="goProDetail"></CCListView>

        </div>

 

    </view>

</template>

```

#### JS代码 （引入组件 填充数据）

```javascript

<script>

    import CCListView from '../../components/ccList/CCListView.vue';

    export default {

        components: {

            CCListView,

 

        },

        data() {

            return {

                // 列表数组

                projectList: []

            }

        },

        onLoad () {

            this.requestData();

        },

        methods: {

            // 列表条目点击事件

            goProDetail(item) {

console.log("条目数据 = "  + JSON.stringify(item));

            },

 

            requestData() {

                // 模拟请求参数设置

                let reqData = {

                    'area': '',

                    "pageSize": 10,

                    "pageNo": this.curPageNum

                }

                // 模拟请求接口

                this.totalNum = 39;

                this.projectList = [];

                for (let i = 0; i < 10; i++) {

                    this.projectList.push({

                        'proName': '我是项目' + i,

                        'proUnit': '我是详情' + i,

                        'area': '广州',

                        'proType': '省级项目',

                        'stage': '已开工',

                        'id': i + ''

                    });

                }

            }

        }

    }

</script>

```

#### CSS

```CSS

<style>

    page {

        background-color: #f7f7f7;

    }

    .content {

        display: flex;

        flex-direction: column;

    }

    .mui-content-padded {

        margin: 0px 14px;

        /* background-color: #ffffff; */

    }

</style>

```

阅读全文下载完整代码请关注微信公众号： 前端组件开发