uniapp - list UI组件篇

在用uniapp框架开发时,不可避免的需要使用list列表,form表单,但是我们又不想把时间花在写页面上,于是我有了打造属于自己的uniapp UI框架的想法,逐步实现,本篇是list UI组件的第一篇,list-section 组件的实现,比较简单

目录结构:

1|---components
2
3      |----------list-section
4
5      |----------list-ul
6
7      |----------list-li

本篇是list UI组件的第一篇 list-section

示例图:

list-section 组件示例图
list-section 组件示例图

list-section UI组件

编写list-section组件,主要从通用性进行设计,通用就意味着丰富实用的api是必须的

list-section UI组件源码

  1<template>
2    <view 
3    class="list-section" 
4    :style="{height:listHeight,backgroundColor:listBgColor}">

5        <view class="list-section-content">
6            <view 
7            v-if="!!iconStyle" 
8            :class="[iconStyle==='line'?'list-section-line':iconStyle==='dot'?'list-section-dot':'']" 
9            :style="{'backgroundColor':iconColor}">
</view>
10            <view :style="{color:titleColor,fontSize:fontSize}">{{title}}</view> 
11        </view>
12        <slot/>
13        <view class="list-section-extra" v-if="isShowBtn">
14            <view 
15            class="list-btn" 
16            hover-class="list-btn--hover" 
17            :style="{color:btnTitleColor,fontSize:btnFontSize,borderRadius:borderRadius,backgroundColor:btnBgColor}"
18            @click="btnHandler">
{{btnTitle}}</view>
19        </view>
20    </view>
21</template>
22<script>
23    export default {
24        name:'list-section',
25        props:{
26            type:{
27                type:String|Number,
28                default:''
29            },
30            listHeight:{
31                type:String,
32                default:'50px'
33            },
34            listBgColor:{
35                type:String,
36                default:'#f8f8f8'
37            },
38            iconStyle:{
39                type:String,
40                default:''
41            },
42            iconColor:{
43                type:String,
44                default:'#c0c0c0'
45            },
46            title:{
47                type:String,
48                default:'默认标题'
49            },
50            titleColor:{
51                type:String,
52                default:'#333333'
53            },
54            fontSize:{
55                type:String,
56                default:'12px'
57            },
58            isShowBtn:{
59                type:Boolean,
60                default:false
61            },
62            btnTitle:{
63                type:String,
64                default:'按钮'
65            },
66            btnTitleColor:{
67                type:String,
68                default:'#ffffff'
69            },
70            btnFontSize:{
71                type:String,
72                default:'14px'
73            },
74            borderRadius:{
75                type:String,
76                default:'15px'
77            },
78            btnBgColor:{
79                type:String,
80                default:'#39b54a'
81            }
82        },
83        data() {
84            return {
85
86            }
87        },
88        methods: {
89            btnHandler(){
90                this.$emit('onBtnClick',this.type)
91            }
92        }
93    }
94
</script>
95<style lang="scss" scoped>
96    .list-section{
97        margin-top:20upx;
98        padding: 0 10px;
99        min-height: 88upx;
100        height: 100upx;
101        display: flex;
102        flex-direction: row;
103        justify-content: space-between;
104        align-items: center;
105        position: relative;
106        .list-section-content{
107            display: flex;
108            flex-direction: row;
109            justify-content: space-between;
110            align-items: center;
111            .list-section-line{
112                height: 15px;
113                background-color: #c0c0c0;
114                border-radius: 5px;
115                width: 3px;
116                margin-right:28upx;
117            }
118            .list-section-dot{
119                height: 8px;
120                background-color: #f37b1d;
121                border-radius: 50%;
122                width: 8px;
123                margin-right: 20upx;
124            }
125        }
126        .list-section-extra{
127            .list-btn{
128                box-shadow: 3px 3px 4px rgba(48, 156, 63, 0.2);
129                box-sizing: border-box;
130                padding: 0 30upx;
131                height: 60upx;
132                display: flex;
133                flex-direction: row;
134                text-align: center;
135                align-items: center;
136
137            }
138            .list-btn--hover{
139                opacity: .8;
140            }
141        }
142    }
143
</style>

list-section UI组件使用

 1<template>
2    <view>
3        <list-section :title="'商品列表'"></list-section>
4        <list-section
5        :type="333"
6        :listHeight="'44px'"
7        :listBgColor="'#fff'"
8        :iconStyle="'line'"
9        :iconColor="'#9865e2'" 
10        :title="'基础用法'" 
11        :titleColor="'#49cc5b'"
12        :fontSize="'14px'"
13        :isShowBtn="true"
14        :btnTitle="'按钮'"
15        :btnTitleColor="'#333333'"
16        :btnBgColor="'#fbbd08'"
17        :btnFontSize="'12px'"
18        :borderRadius="'15px'"
19        @onBtnClick="onBtnClick"
20        >
</list-section>
21    </view>
22</template>
23<script>
24    import listSection from '@/components/list/list-section.vue'
25    export default {
26        components:{
27            listSection
28        },
29        data() {
30            return {
31
32            }
33        },
34        methods: {
35            onBtnClick(type){
36                console.log(`点击的来源类型是:${type}`)
37            }
38        }
39    }
40
</script>
41<style lang="scss" scoped></style>

list-section UI组件共计13个API和一个事件

list-section API

API 注释 默认
type 实例类型,有多个实例按钮时,配合按钮事件使用,明确点击来源 ''
listHeight list-section的容器高度 50px, min-height为44px
listBgColor list-section的容器背景颜色 #f8f8f8
iconStyle 标题文字前面的图标的修饰风格,有圆点和竖线两种 ''
iconColor 标题文字前面的图标的颜色 #c0c0c0
title 标题 默认标题
titleColor 标题字体颜色 #333333
fontSize 标题字体大小 12px
isShowBtn 是否显示右侧按钮 false,不显示
btnTit 按钮名字 按钮
btnTitleColor 按钮的字体颜色 #ffffff
btnBgColor 按钮的背景颜色 #39b54a
btnFontSize 按钮内容的字体大小 14px
borderRadius 按钮的border-radius 15px

list-section Event

事件名称 注释
onBtnClick 按钮点击事件,携带实例来源类型type