宫格布局

样式介绍

内置宫格布局基础样式 :

/* 宫格布局 */
.ux-grid, .ux-grid-item{display:flex;}
.ux-grid{flex-direction:row; flex-wrap:wrap;}
.ux-grid-item{width:137rpx; flex-direction:column; align-items:center; margin:0;}
.ux-grid-icon{height:80rpx; font-size:68rpx; line-height:80rpx; text-align:center;}
.ux-grid-icon-img{width:80rpx; height:80rpx; border-radius:20rpx;}
.ux-grid-text{line-height:50rpx; text-align:center; font-size:24rpx; margin-top:2px;}

效果图示

演示代码

<template>
	<scroll-view class="ux-flex1 ux-page-color">
		<text class="ux-h6 ux-color-grey ux-padding">图片形式</text>
		<view class="ux-bg-white ux-grid ux-space-between" 
		style="padding:20rpx;">
			<view
			v-for="item in [1,2,3,4,5]" 
			:key="item" 
			class="ux-grid-item">
				<image 
				mode="aspectFill" 
				class="ux-grid-icon-img"
				:src="imgUrl"></image>
				<text class="ux-grid-text ux-primary-text">项目</text>
			</view>
		</view>
		<text class="ux-h6 ux-color-grey ux-padding">图标形式</text>
		<view class="ux-bg-white ux-grid ux-space-between" 
		style="padding:20rpx;">
			<view 
			class="ux-grid-item">
				<text 
				class="ux-grid-icon ux-icons ux-color-primary">{{"\ue613"}}</text>
				<text 
				class="ux-grid-text ux-icons ux-color-grey2">set</text>
			</view>
			<view
			class="ux-grid-item">
				<text 
				class="ux-grid-icon ux-icons ux-color-primary">{{"\ue63c"}}</text>
				<text 
				class="ux-grid-text ux-icons ux-color-grey2">QQ</text>
			</view>
			<view
			class="ux-grid-item">
				<text 
				class="ux-grid-icon ux-icons ux-color-primary">{{"\ue6cd"}}</text>
				<text 
				class="ux-grid-text ux-icons ux-color-grey2">微博</text>
			</view>
			<view
			class="ux-grid-item">
				<text 
				class="ux-grid-icon ux-icons ux-color-primary">{{"\ue63e"}}</text>
				<text 
				class="ux-grid-text ux-icons ux-color-grey2">微信</text>
			</view>
			<view
			class="ux-grid-item">
				<text 
				class="ux-grid-icon ux-icons ux-color-primary">{{"\ue7d9"}}</text>
				<text 
				class="ux-grid-text ux-icons ux-color-grey2">at</text>
			</view>
		</view>
		<text class="ux-h6 ux-color-grey ux-padding">宽度修改</text>
		<view class="ux-bg-white ux-grid ux-space-between" 
		style="padding:20rpx;">
			<view
			v-for="item in [1,2,3,4]" 
			:key="item" 
			class="ux-grid-item grid4">
				<image 
				mode="aspectFill" 
				class="ux-grid-icon-img" 
				:src="imgUrl"></image>
				<text class="ux-grid-text ux-primary-text">项目</text>
			</view>
		</view>
	</scroll-view>
</template>
<script lang="uts">
export default{
	data(){
		return {
			imgUrl:"https://img1.baidu.com/it/u=2348655441,223331066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
		}
	}
}
</script>
<style scoped>
.grid4{width:172rpx;}
</style>