更新记录

1.0.0（2024-06-04） 下载此版本

初始化

平台兼容性

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中使用组件

<spring-buttons :dataList="list" @tapItem="handleTapItem"></spring-buttons>

设置列数 （3~5列显示效果较好）

<spring-buttons :dataList="list" :colNum="3" :scale="0.45" @tapItem="handleTapItem"></spring-buttons>

标题嵌入

        <spring-buttons :dataList="list" titleType="insert" :colNum="3" :scale="0.45"
    @tapItem="handleTapItem"></spring-buttons>

不显示标题左侧的竖块

            <spring-buttons :dataList="list" :showLine="false" titleType="insert" :colNum="3" :scale="0.45"
    @tapItem="handleTapItem"></spring-buttons>

不显示标题

            <spring-buttons :dataList="list" :showTitle="false" titleType="insert" :colNum="3" :scale="0.45"
    @tapItem="handleTapItem"></spring-buttons>

export default {
    data() {
        return {
            list: [{
                    icon: 'http://58.240.238.158:8100/images/service/icons-property/icon1.png',
                    name: '报障报修'
                },
                {
                    icon: 'http://58.240.238.158:8100/images/service/icons-property/icon3.png',
                    name: '临停车缴费'
                },
                {
                    icon: 'http://58.240.238.158:8100/images/service/icons-property/icon9.png',
                    name: '装修申请'
                },
                {
                    icon: 'http://58.240.238.158:8100/images/index/icon_3.png',
                    name: '园区动态'
                },
                {
                    icon: 'http://58.240.238.158:8100/images/service/icons-basic/icon32.png',
                    name: '水费充值'
                },
                {
                    icon: 'http://58.240.238.158:8100/images/service/icons-basic/icon29.png',
                    name: '电费充值'
                },
                {
                    icon: 'http://58.240.238.158:8100/images/service/icons-basic/icon34.png',
                    name: '退租申请'
                },
                {
                    icon: 'http://58.240.238.158:8100/images/service/icons-basic/icon31.png',
                    name: '快讯通知'
                }
            ]
        }
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: '不显示标题'
        })
    },
    methods: {
        handleTapItem(e) {
            console.log(e);
        }
    }
}

API

Props

Events