tui-grid 宫格 开源组件

介绍

宫格外层盒子，结合组件 tui-grid-item 使用。

引入

uni-app引入

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

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

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

uni-app版本平台差异说明

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

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

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

代码演示

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

示例

默认带上边线条，可通过 unlined 属性去掉上边线条。

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

// data 数据 及 方法
export default {
 data() {
 	return {
 		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
 		}, {
 			name: "shop-fill",
 			size: 30
 		}, {
 			name: "order",
 			size: 30
 		}, {
 			name: "feedback",
 			size: 30
 		}, {
 			name: "like",
 			size: 30
 		}]
 	}
 },
 methods: {
 	detail: function(e) {
 		//this.tui.xxx 等api使用请查看 文档 【快速上手】中介绍
 		this.tui.toast("click~");
 	}
 }
}

.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>
 <block wx:for="{{dataList}}" wx:key="index">
 	<tui-grid-item cell="{{3}}" bindclick="detail">
 		<view class="tui-grid-icon">
 			<tui-icon name="{{item.name}}"></tui-icon>
 		</view>
 		<text class="tui-grid-label">{{item.name}}</text>
 	</tui-grid-item>
 </block>
</tui-grid>

// data 数据 及 方法
// 请引入示例中的js文件，并配置正确的路径
import tui from '../../../common/httpRequest'
Page({
    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
 		 }, {
 		   name: "shop-fill",
 		   size: 30
 		 }, {
 		   name: "order",
 		   size: 30
 		 }, {
 		   name: "feedback",
 		   size: 30
 		 }, {
 		   name: "like",
 		   size: 30
 		 }]
    },
    detail: function (e) {
 	 tui.toast("click~");
    }
})

.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;
}

// Make sure to add code blocks to your code group

Slots

插槽名称	说明
default	标签显示内容，可自定义内容展示

Props

属性名	类型	说明	默认值
unlined	Boolean	是否去掉上线条	false

Events

事件名	说明	回调参数
-	-	-

预览

特别说明

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

线上程序扫码预览

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