uniapp - list UI组件篇

本篇文章是 uniapp-list UI组件的第二篇,list-ul和list-li,自此uniapp-list UI组件完成

目录结构:

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

UI组件示例图:

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

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

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

list-ul UI组件源码

 1<template>
2    <view class="list-group" :style="{backgroundColor:bg}">
3        <slot/>
4    </view> 
5</template>
6<script>
7    export default {
8        name:'list-group',
9        props:{
10            bg:{
11                type:String,
12                default:'#ffffff'
13            }
14        },
15        data() {
16            return {
17
18            }
19        },
20        methods: {
21
22        }
23    }
24
</script>
25<style lang="scss" scoped></style>

list-li UI组件源码

  1<template>
2    <view class="list-li-container">
3        <!-- 基础用法 -->
4        <view class="list-li"  v-if="type=='base'" :class="[disabled?'disabled':'']">
5            <view class="list-li-cell">
6                <view class="list-cell-content">
7                    <template v-if="content.length">
8                        {{content}}
9                    </template>
10                    <template  v-else-if="note.length || title.length">
11                        <view class="list-cell-content-title">{{title}}</view>
12                        <view class="list-cell-content-note">{{note}}</view>
13                    </template>
14                    <template v-else>
15                        <slot name="right"></slot>
16                    </template>
17                </view>
18            </view>
19        </view>
20
21        <!-- 菜单列表 -->
22        <view class="list-li" :hover-class="[(isShowSwitch || !isHover)?'':'list-li--hover']" v-else-if="type=='menu'" :class="[disabled?'disabled':'']">
23            <view class="list-li-cell">
24                <view class="list-cell-icon" v-if="!!iconImg || !!iconType">
25                    <icon v-if="!!iconType" :type="iconType" size="26"/>
26                    <image v-if="!!iconImg" class="img" :src="iconImg">
27                </view>
28                <view class="list-cell-content">{{content}}</view>
29                <view class="list-right" :class="[(isShowSwitch || !isHover)?'':'arrow-right']">
30                    <template v-if="isShowSwitch">
31                        <switch :disabled="disabled"  @change="switchChange" />
32                    </template>
33                    <template v-else-if="isShowBadge">
34                        <view class="list-cell-badge" :style="{backgroundColor:badgeBgColor,color:badgeColor}" v-if="babgeNum!=0">{{babgeNum}}</view>
35                    </template>
36                    <template v-else-if="rightText.length">
37                        {{rightText}}
38                    </template>
39                    <template>
40                        <slot name="right"></slot>
41                    </template>
42                </view>
43            </view>
44        </view>
45        <view class="list-li" v-else-if="type=='msg'" hover-class="list-li--hover" :class="[disabled?'disabled':'']">
46            <view class="list-li-cell">
47                <view class="list-cell-avatar" v-if="avatar.length"><image :src="avatar" :style="{borderRadius:shape=='round'?'1000px':'10px'}"></image></view>
48                <view class="list-cell-content" style="max-width:500upx">
49                    <view class="list-cell-msg-title">{{title}}</view>
50                    <view class="list-cell-msg-note">{{note}}</view>
51                </view>
52                <view class="list-msg-right">
53                    <view class="list-msg-top" v-if="time.length">{{time}}</view>
54                    <view class="list-msg-bottom"><view class="list-msg-badge" v-if="babgeNum!=0">{{babgeNum}}</view></view>
55                </view>
56            </view>
57        </view>
58        <view v-else>
59            <slot/>
60        </view>
61    </view> 
62</template>
63<script>
64    export default {
65        name:'list-li',
66        props:{
67            type:{
68                type:String | Number,
69                default:''
70            },
71            disabled:{
72                type:Boolean,
73                defaultfalse
74            },
75            content:{
76                type:String,
77                default''
78            },
79            title:{
80                type:String,
81                default''
82            },
83            note:{
84                type:String,
85                default''
86            },
87            rightText:{
88                type:String,
89                default''
90            },
91            iconImg:{
92                type:String,
93                default:''
94            },
95            iconType:{
96                type:String,
97                default:''
98            },
99            isShowBadge:{
100                type:Boolean,
101                default:false
102            },
103            isShowSwitch:{
104                type:Boolean,
105                default:false
106            },
107            babgeNum:{
108                type:String | Number,
109                default:''
110            },
111            isHover:{
112                type:Boolean,
113                default:true
114            },
115            badgeBgColor:{
116                type:String,
117                default'#4cd964'
118            },
119            badgeColor:{
120                type:String,
121                default'#ffffff'
122            },
123            avatar:{
124                type:String,
125                default:''
126            },
127            shape:{
128                type:String,
129                default:''
130            },
131            time:{
132                type:String,
133                default:''
134            },
135            originType:{
136                type:String | Number,
137                default:''
138            }
139        },
140        data() {
141            return {
142
143            }
144        },
145        methods: {
146            switchChange(e){
147                this.$emit('switchChange',e.detail.value, this.originType)
148            }
149        }
150    }
151
</script>
152<style lang="scss" scoped>
153    .list-li-container{
154        .disabled{
155            opacity: 0.3;
156        }
157        .list-li{
158            padding-left: 30upx;
159            .list-li-cell{
160                display: flex;
161                flex-direction: row;
162                justify-content: space-between;
163                position: relative;
164                padding: 24upx 30upx 24upx 0;
165                .list-cell-avatar{
166                    width: 96upx;
167                    height: 96upx;
168                    margin-right: 20upx;
169                    image{
170                        width: 100%;
171                        height: 100%;
172                    }
173                }
174                .list-cell-icon{
175                    width: 52upx;
176                    height: 52upx;
177                    margin-right: 18upx;
178                    .img{
179                        width: 100%;
180                        height: 100%;
181                    }
182                }
183                .list-cell-content{
184                    flex: 1;
185                    font-size: 14px;
186                    color: #3b4144;
187                    line-height: 1.8;
188                    .list-cell-msg-title{
189
190                    }
191                    .list-cell-msg-note{
192                        max-width: 500upx;
193                        margin-top: 3px;
194                        color: #999;
195                        font-size: 12px;
196                        overflow: hidden;
197                        word-break: break-all;  /* break-all(允许在单词内换行。) */
198                        text-overflow: ellipsis;  /* 超出部分省略号 */
199                        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
200                        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
201                        -webkit-line-clamp: 1; /** 显示的行数 **/
202                    }
203                    .list-cell-content-title{
204
205                    }
206                    .list-cell-content-note{
207                        margin-top: 3px;
208                        color: #999;
209                        font-size: 12px;
210                        overflow: hidden;
211                    }
212                }
213                .list-msg-right{
214                    flex-direction: column;
215                    text-align: center;
216                    display: flex;
217                    align-items: center;
218                    justify-content: space-around;
219                    .list-msg-top{
220                        color: #8799a3;
221                        font-size: 10px;
222                    }
223                    .list-msg-bottom{
224                        .list-msg-badge{
225                            font-size: 12px;
226                            color: #fff;
227                            background-color: #e54d42;
228                            padding: 0 12upx;
229                            border-radius: 100upx;
230                            display: flex;
231                            align-items: center;
232                            justify-content: center;
233                        }
234                    }
235
236                }
237            }
238            .list-right{
239                color: #999;
240                font-size: 12px;
241                display: flex;
242                flex-direction: row;
243                align-items: center;
244                .list-cell-badge{
245                    font-size: 12px;
246                    padding: 0 12upx;
247                    border-radius: 100upx;
248                    display: flex;
249                    align-items: center;
250                    justify-content: center;
251                }
252            }
253            .arrow-right{
254                padding-right: 38upx;
255            }
256            .arrow-right::after{
257                content: " ";
258                display: block;
259                border: solid #888888;
260                border-width: 0 1px 1px 0;
261                display: inline-block;
262                padding: 3px;
263                transform: rotate(-45deg) translateY(-50%);
264                position: absolute;
265                right: 10rpx;
266                top: 50%;
267
268            }
269            .list-li-cell::after{
270                position: absolute;
271                bottom: -1px;
272                right: 0;
273                left: 0;
274                height: 1px;
275                content: '';
276                transform: scaleY(.5);
277                background-color: #e5e5e5;
278            }
279        }
280        .list-li--hover{
281            background-color: #f1f1f1;
282        }
283
284    }
285
</style>    

使用示例

 1<template>
2    <view>
3        <!-- 基础用法 -->
4        <list-section :title="'基础用法'" :iconStyle="'line'" :iconColor="'#26B1F6'" :titleColor="'#8CC7B5'" :listBgColor="'#BEE7E9'"></list-section>
5        <list-ul>
6            <list-li :type="'base'" >
7                <template v-slot:right>
8                    <view > 自定义 </view>
9                </template>
10            </list-li>
11            <list-li :type="'base'" :content="'列表文字内容'"></list-li>
12            <list-li :type="'base'" :title="'这是一个列表标题'" :note="'这是一个列表描述'"></list-li>
13            <list-li :type="'base'" :disabled="true" :content="'禁用状态列表'"></list-li>
14        </list-ul>
15
16        <!-- 菜单列表 -->
17        <list-section :title="'菜单列表'" :iconStyle="'line'" :iconColor="'#e03997'" :titleColor="'#ff0000'"></list-section>
18        <list-ul>
19            <list-li :type="'menu'" :iconImg="'https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png'" :content="'列表左侧带略缩图'" :rightText="'右侧文字'"></list-li>
20            <list-li :type="'menu'" :iconType="'download'" :content="'列表右侧带箭头 + 角标'" :babgeNum="99" :isShowBadge="true" :rightText="'右侧的文字描述'"></list-li>
21            <list-li :type="'menu'" :content="'列表右侧带 Switch'" :isShowSwitch="true" :originType="'11'" @switchChange="switchChange"></list-li>
22            <list-li :type="'menu'" :content="'禁用状态'" :isShowSwitch="true" :disabled="true" :originType="'22'"></list-li>
23            <list-li :type="'menu'" :content="'右边插槽自定义内容'" :isHover="false">
24                <template v-slot:right>
25                    <view class="btn"> 按钮 </view>
26                </template>
27            </list-li>
28        </list-ul>
29
30        <!-- 消息列表 -->
31        <list-section :title="'消息列表'" :iconStyle="'line'" :iconColor="'#8dc63f'" :titleColor="'#1890ff'"></list-section>
32        <list-ul>
33            <list-li 
34            :type="'msg'" 
35            :shape="'round'"
36            :avatar="'https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg'"
37            :title="'消息列表标题'"
38            :note="'消息列表描述消息列表描述消息列表描述消息列表描述消息列表描述'"
39            :time="'12:59'"
40            :babgeNum="98"
41            >

42            </list-li>
43        </list-ul>
44        <list-li>
45            <view style="height: 30px;text-align: center;background-color: #4CD964;color: #fff;line-height: 30px;"> 凑个数 </view>
46        </list-li>
47    </view>
48</template>
49<script>
50    import listSection from '@/components/list/list-section.vue'
51    import listUl from '@/components/list/list-ul.vue'
52    import listLi from '@/components/list/list-li.vue'
53    export default {
54        components:{
55            listUl,
56            listSection,
57            listLi
58        },
59        data() {
60            return {
61
62            }
63        },
64        methods: {
65           switchChange(type,state){
66               console.log(`开关事件来源类型:${type}`)
67               console.log(`开关状态:${state}`)
68           }
69        }
70    }
71
</script>
72<style lang="scss" scoped>
73    .btn{
74        position: relative;
75        border0upx;
76        display: inline-flex;
77        align-items: center;
78        justify-content: center;
79        box-sizing: border-box;
80        padding0 30upx;
81        font-size28upx;
82        height64upx;
83        line-height1;
84        text-align: center;
85        text-decoration: none;
86        overflow: visible;
87        margin-left: initial;
88        transformtranslate(0upx, 0upx);
89        margin-right: initial;
90        background-color#f37b1d;
91        color#ffffff;
92    }
93
</style>

list-ul UI组件共计1个API

list-section API

API 注释 默认
bg list-ul容器的背景色 #ffffff

list-li API

API 注释 默认
type list类型,目前暂由3种,base、menu、msg ''
disabled 列表是否禁点 false
content 列表内容 ''
title 列表内容分上下两个的时候,对应上边的标题 ''
note 列表内容分上下两个的时候,对应下边的描述 ''
rightText 列表右边的文字内容 ''
iconImg 列表前面的img图片缩略图 ''
iconType 列表前面的 icon 图标类型,暂时默认是uniapp官方图标 ''
isShowBadge 是否显示列表右侧角标 false
babgeNum 列表右侧角标内的数字 ''
isShowSwitch 是否显示列表右侧开关 false
isHover 是否需要选中效果 false
badgeBgColor 列表右侧角标背景色 #4cd964
badgeColor 列表右侧角标字体颜色 #ffffff
avatar 列表左侧头像图片地址 ''
shape 列表左侧头像样式 ,暂时只支持 圆形 和正方形 正方形
time 消息列表右侧对应的事件 ''
originType 开关事件来源 ''

list-list Event

事件名称 注释
switchChange 开关按钮点击事件,携带实例来源类型type和开关状态