更新记录

1.01(2021-06-15) 下载此版本

fix 点击更多 bug

1.0(2021-06-15) 下载此版本

第一次提交


平台兼容性

list 标题组件

文档说明

此插件依赖uviewui icon

1、属性说明

参数 类型 默认值 说明
background Object background: '#ffffff' 自定义 style
borderLeft String '' 伪元素左边框
iconColorLeft String #c0c4cc 左边图标的颜色
iconSizeLeft String 或 Number 28 左边图标的大小
iconSrcLeft String '' 左边图标路径 支持 uviewui 图标和图片路径
iconStyleLeft Object {} 左边自定义图标 style
iconColorRight String #c0c4cc 右边图标的颜色
iconSizeRight String 或 Number 28 右边图标的大小
iconSrcRight String arrow-right 右边图标路径
iconStyleRight Object {} 右边自定义图标 style
titleSize String 或 Number 26 标题大小,单位 rpx
titleFwt String normal 标题 fontWeight
titleColor String #c0c4cc 标题颜色
title String 列表标题 标题
tip String '' 右边辅助文字

2、事件说明

事件名 返回值 说明
goto '' 点击右侧图标事件

基本用法

常规标题


<nx-list-title title="爆款产品" titleSize="32" fontWeight="600" titleColor="#333" @goto="goto" />

右边加文字


<nx-list-title title="爆款产品" titleSize="32" tip="更多" fontWeight="600" titleColor="#333" @goto="goto" />

左边加(uviewui)的 icon


<nx-list-title title="限时抢购" iconSrcLeft="clock" titleSize="32" fontWeight="600" titleColor="#333"
                @goto="goto" />

左边加图片


<nx-list-title title="爆款产品" :iconSrcLeft="imgUrl" titleSize="32" fontWeight="600" titleColor="#333"
                @goto="goto" />

左边加边框


<nx-list-title title="活动产品" borderLeft="6rpx solid #ec706b"  titleSize="32" fontWeight="600" titleColor="#333"
                @goto="goto" />

加渐变


<nx-list-title :background="{'background-image': 'linear-gradient(180deg, #e5f7f8, #ffffff)'}" title="爆款产品"
                titleSize="32" fontWeight="600" titleColor="#333" @goto="goto" />

<script>
    export default {
        methods: {
            goto() {}

        },
        data() {
            return {
                imgUrl: 'https://sino-cloud-base.oss-cn-hangzhou.aliyuncs.com/fileupload-product/sino-ces2.0/img/mafile/images/index/hot.png'

            };
        }
    }
</script>

隐私、权限声明

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

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

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

许可协议

MIT协议

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