tui-grid-item 宫格Item 开源组件

介绍

可设置2~5列，以及基本样式设置，可结合组件 tui-grid 使用。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiGridItem from "@/components/thorui/tui-grid-item/tui-grid-item.vue"
export default {
	components:{
		tuiGridItem
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-grid-item": "/components/thorui/tui-grid-item/tui-grid-item"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

设置列数

通过 cell 属性设置宫格列数，cell 支持2~5列，默认为3。

<!--uni-app-->
<tui-grid>
	<block v-for="(item,index) in dataList" :key="index">
		<tui-grid-item :cell="4">
			<view class="tui-grid-icon">
				<tui-icon :name="item.name" :size="item.size"></tui-icon>
			</view>
			<text class="tui-grid-label">{{item.name}}</text>
		</tui-grid-item>
	</block>
</tui-grid>

<!--微信小程序-->
<tui-grid>
	<block wx:for="{{dataList}}" wx:key="index">
		<tui-grid-item cell="{{4}}">
			<view class="tui-grid-icon">
				<tui-icon name="{{item.name}}" size="{{item.size}}"></tui-icon>
			</view>
			<text class="tui-grid-label">{{item.name}}</text>
		</tui-grid-item>
	</block>
</tui-grid>

// data 数据
dataList: [{
	name: "refresh",
	size: 30
}, {
	name: "search",
	size: 30
}, {
	name: "close-fill",
	size: 30
}, {
	name: "shut",
	size: 30
}, {
	name: "plus",
	size: 30
}, {
	name: "star-fill",
	size: 30
}, {
	name: "revoke",
	size: 30
}, {
	name: "shop",
	size: 30
}]

.tui-grid-icon {
	width: 64rpx;
	height: 64rpx;
	margin: 0 auto;
	text-align: center;
	vertical-align: middle;
}

.tui-grid-label {
	display: block;
	text-align: center;
	font-weight: 400;
	color: #333;
	font-size: 28rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 10rpx;
}

去掉所有边框

通过设置 tui-grid 组件的 unlined 属性，tui-grid-item 组件的 border 以及 bottom-line 属性去除边框。

<!--uni-app-->
<tui-grid unlined>
	<block v-for="(item,index) in dataList" :key="index">
		<tui-grid-item :border="false" :bottom-line="false">
			<view class="tui-grid-icon">
				<tui-icon :name="item.name" :size="item.size"></tui-icon>
			</view>
			<text class="tui-grid-label">{{item.name}}</text>
		</tui-grid-item>
	</block>
</tui-grid>

<!--微信小程序-->
<tui-grid unlined>
	<block wx:for="{{dataList}}" wx:key="index">
		<tui-grid-item border="{{false}}" bottom-line="{{false}}">
			<view class="tui-grid-icon">
				<tui-icon name="{{item.name}}" size="{{item.size}}"></tui-icon>
			</view>
			<text class="tui-grid-label">{{item.name}}</text>
		</tui-grid-item>
	</block>
</tui-grid>

// data 数据 与 css 同上

Slots

插槽名称	说明
default	标签显示内容，tui-grid-item内显示内容可自定义

Props

属性名	类型	说明	默认值
cell	[Number,String]	展示多少列，可设置2,3,4,5	3
backgroundColor	String	背景颜色	#fff
hover	Boolean	是否有点击效果	true
bottomLine	Boolean	是否需要底部线条	true
border	Boolean	是否需要纵向边框线条	true
index	Boolean	grid-item索引	0

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	点击事件，绑定事件后点击标签可触发	{index: Number}

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码