更新记录

0.0.1(2023-02-13) 下载此版本

基础列表; 支持列表搜索;


平台兼容性

List 列表

组件名:wgh-list 代码块: uListuListItem 关联组件:uni-listuni-list-itemuni-badgeuni-iconsuni-list-chatuni-list-ad

基本用法

  • 设置 title 属性,可以显示列表标题
  • 设置 disabled 属性,可以禁用当前项
<template>
    <view class="content">
        <wgh-list searchPlaceholder="11212" :list="list" @click='onClick'></wgh-list>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                list: [
                    {
                        id: '12',
                        text: '122'
                    },
                    {
                        id: '34',
                        text: '344'
                    },
                ]
            }
        },
        onLoad() {

        },
        methods: {
            onClick(e){
                console.log(e, 'e--0');
            }
        }
    }
</script>    

List Props

属性名 类型 默认值 说明
searchPlaceholder String 请输入搜索内容 搜索框展位内容
listBorder Boolean true 是否显示边框[list]
listItemBorder Boolean true 是否显示边框[list-item]

ListItem Props

属性名 类型 默认值 说明
title String - 标题
note String - 描述
ellipsis Number 0 title 是否溢出隐藏,可选值,0:默认; 1:显示一行; 2:显示两行;【nvue 暂不支持】
thumb String - 左侧缩略图,若thumb有值,则不会显示扩展图标
thumbSize String medium 略缩图尺寸,可选值,lg:大图; medium:一般; sm:小图;
showBadge Boolean false 是否显示数字角标
badgeText String - 数字角标内容
badgeType String - 数字角标类型,参考uni-icons
badgeStyle Object - 数字角标样式,使用uni-badge的custom-style参数
rightText String - 右侧文字内容
disabled Boolean false 是否禁用
showArrow Boolean true 是否显示箭头图标
link String navigateTo 新页面跳转方式,可选值见下表
to String - 新页面跳转地址,如填写此属性,click 会返回页面是否跳转成功
clickable Boolean false 是否开启点击反馈
showSwitch Boolean false 是否显示Switch
switchChecked Boolean false Switch是否被选中
showExtraIcon Boolean false 左侧是否显示扩展图标
extraIcon Object - 扩展图标参数,格式为 {color: '#4cd964',size: '22',type: 'spinner'},参考 uni-icons
direction String row 排版方向,可选值,row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排,也受此属性控制

Link Options

属性名 说明
navigateTo 同 uni.navigateTo()
redirectTo 同 uni.reLaunch()
reLaunch 同 uni.reLaunch()
switchTab 同 uni.switchTab()

ListItem Events

事件称名 说明 返回参数
click 点击 uniListItem 触发事件,需开启点击反馈 -
switchChange 点击切换 Switch 时触发,需显示 switch e={value:checked}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问