【uniapp前端组件】流式布局，适用搜索记录、标签等场景

本文档介绍了如何创建适用于搜索记录和标签场景的流式布局组件。内容包括属性介绍如flowList、flowItemValue等，事件处理如@flowItemClickBack，以及使用示例。通过这个组件，你可以轻松地构建动态流式布局。

摘要由CSDN通过智能技术生成

流式布局，适用搜索记录、标签等场景

示例图

在这里插入图片描述

简介

搜索记录或标签类的组件很常见，大部分应用都会运用到类似的场景。本组件带你快速实现流式布局，快来看看吧。

属性介绍

属性名	类型	默认值	必填	说明
`flowOptions`	`Object`	空	是	流式布局的基本属性，包含以下属性：
`flowList`	`Array`	空	是	流式布局展示的数据数组。包含两种数据类型：1、`String`类型数组。2、`Obj`类型数组。
`flowItemValue`	`String`	空	否	流式布局`Item`展示数据的参数名。1、当`flowList`为`String`类型时，可不填或’'。2、当`flowList`为Obj类型时，必填，值为`Obj`展示到流式布局的属性名。
`flowItemBgColor`	`String`	`#868686`	否	流式布局`Item`背景色。
`flowItemTextColor`	`String`	`#ffffff`	否	流式布局`Item`字体颜色。
`flowItemTextSize`	`String`	13	否	流式布局`Item`字体大小，单位`px`。
`flowItemMargin`	`String`	5	否	流式布局`Item`外边距，单位`px`。
`flowItemRadius`	String	0	否	流式布局圆角弧度。为0时=直角矩形，不为0时=圆角矩形。

事件介绍

事件名	说明
`@flowItemClickBack`	流式布局`Item`点击事件回调。回调值`event:{clickIndex:index}`,`clickIndex`为流式布局`Item`下标。

使用示例

<view class="container">
		<bugking7-flow-view 
		:flowOptions="flowOptions" 
		@flowItemClickBack="handleItemClick">
		</bugking7-flow-view>
</view>

data() {
    return {
        flowOptions:{
            flowList:[
                // {   // 为Obj类型
                // 	type:'',
                // 	name:'Android'
                // },
                'Android','IOS','JS','Kotin','Go', //为String类型
                'Curl','Dart','DiBOL','Etoys','Fancy',
                'Gosu','Haskell','Ioke','Ioke','Limbo',
                'Magic','Mathematica','Mirah','MS-DOS Batch','PowerShell'
            ],
            flowItemValue：'',//String类型可不填或空 Obj类型时必填，以上为例，填name
            flowItemMargin:'5',
            flowItemRadius:'8'
        }
    }
},
    
methods: {
    handleItemClick(e){//item点击事件回调
        console.log(e)//{clickIndex: 18}
    }
}