前言
uni-grid组件是uni-app框架中的一个布局组件,用于实现网格布局。通过将内容分为多个格子,可以快速、方便地创建多列网格布局。
提示:以下是本篇文章正文内容,下面案例可供参考
uni-grid组件的特点包括:
1、灵活的布局:可以根据需要定义网格的列数和行数,不同的格子可以具有不同的宽度和高度。
2、自适应布局:可以根据屏幕大小自动调整格子的布局,使页面在不同设备上显示效果一致。
3、多种样式设置:可以为格子设置各种样式,包括背景色、边框、阴影等。
4、支持嵌套:可以在格子中再嵌套其他组件,实现更复杂的布局效果。
5、支持点击事件:可以为格子设置点击事件,实现交互功能。
如下图所示,本篇文章展示了非常多的用法和示例代码
<template>
<view class="warp">
<uni-card is-full :is-shadow="false">
<text class="uni-h6">宫格组件主要使用场景如:商品推荐列表、热门内容等</text>
</uni-card>
<uni-section title="基础样式" type="line" padding>
<uni-grid :column="4" :highlight="true" @change="change">
<uni-grid-item v-for="(item, index) in 4" :index="index" :key="index">
<view class="grid-item-box" style="background-color: #fff;">
<uni-icons type="image" :size="30" color="#777" />
<text class="text">文本信息</text>
</view>
</uni-grid-item>
</uni-grid>
</uni-section>
<uni-section title="自定义列数" type="line" padding>
<uni-grid :column="4" :highlight="true" @change="change">
<uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
<view class="grid-item-box" style="background-color: #fff;">
<uni-icons type="image" :size="30" color="#777" />
<text class="text">文本信息</text>
</view>
</uni-grid-item>
</uni-grid>
</uni-section>
<uni-section title="滑动视图" type="line" padding>
<!-- 因为swiper特性的关系,请指定swiper的高度 ,swiper的高度并不会被内容撑开-->
<swiper class="swiper" :indicator-dots="true">
<swiper-item>
<uni-grid :column="3" :highlight="true" @change="change">
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
<view class="grid-item-box">
<image :src="item.url" class="image" mode="aspectFill" />
<text class="text">{{ item.text }}</text>
</view>
</uni-grid-item>
</uni-grid>
</swiper-item>
<swiper-item>
<uni-grid :column="3" :highlight="true" @change="change">
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
<view class="grid-item-box">
<image :src="item.url" class="image" mode="aspectFill" />
<text class="text">{{ item.text }}</text>
</view>
</uni-grid-item>
</uni-grid>
</swiper-item>
<swiper-item>
<uni-grid :column="3" :highlight="true" @change="change">
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
<view class="grid-item-box">
<image :src="item.url" class="image" mode="aspectFill" />
<text class="text">{{ item.text }}</text>
</view>
</uni-grid-item>
</uni-grid>
</swiper-item>
</swiper>
</uni-section>
<uni-section title="动态加载" type="line" padding>
<view class="grid-dynamic-box">
<uni-grid :column="3" :highlight="true" @change="change">
<uni-grid-item v-for="(item, index) in dynamicList" :index="index" :key="index">
<view class="grid-item-box" :style="{'backgroundColor':item.color}">
<image :src="item.url" class="image" mode="aspectFill" />
<text class="text">{{ item.text }}</text>
</view>
</uni-grid-item>
</uni-grid>
</view>
<button type="primary" @click="add">点击添加一个宫格</button>
<button v-if="dynamicList.length !== 0" type="primary" style="margin-top: 15px;"
@click="del">点击删除一个宫格</button>
</uni-section>
<uni-section title="无边框带角标(3列)" type="line" padding>
<uni-grid :column="3" :show-border="false" :square="false" @change="change">
<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
<view class="grid-item-box">
<image class="image" :src="item.url" mode="aspectFill" />
<text class="text">{{item.text}}</text>
<view v-if="item.badge" class="grid-dot">
<uni-badge :text="item.badge" :type="item.type" />
</view>
</view>
</uni-grid-item>
</uni-grid>
</uni-section>
<uni-section title="矩形宫格(3列)" type="line" padding>
<uni-grid :column="3" :square="false" :highlight="false" @change="change">
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
<view class="grid-item-box">
<image :src="item.url" class="image" mode="aspectFill" />
<text class="text">{{ item.text }}</text>
</view>
</uni-grid-item>
</uni-grid>
</uni-section>
<uni-section title="边框颜色(4列 无文字)" type="line" padding>
<uni-grid :column="4" border-color="#03a9f4" @change="change">
<uni-grid-item :index="0">
<view class="grid-item-box">
<image class="image" src="/static/c1.png" mode="aspectFill" />
</view>
</uni-grid-item>
<uni-grid-item :index="1">
<view class="grid-item-box">
<image class="image" src="/static/c2.png" mode="aspectFill" />
</view>
</uni-grid-item>
<uni-grid-item :index="2">
<view class="grid-item-box">
<image class="image" src="/static/c3.png" mode="aspectFill" />
</view>
</uni-grid-item>
<uni-grid-item :index="3">
<view class="grid-item-box">
<image class="image" src="/static/c4.png" mode="aspectFill" />
</view>
</uni-grid-item>
</uni-grid>
</uni-section>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
dynamicList: [],
list: [{
url: '/static/c1.png',
text: 'Grid 1',
badge: '0',
type: "primary"
},
{
url: '/static/c2.png',
text: 'Grid 2',
badge: '1',
type: "success"
},
{
url: '/static/c3.png',
text: 'Grid 3',
badge: '99',
type: "warning"
},
{
url: '/static/c4.png',
text: 'Grid 4',
badge: '2',
type: "error"
},
{
url: '/static/c5.png',
text: 'Grid 5'
},
{
url: '/static/c6.png',
text: 'Grid 6'
},
{
url: '/static/c7.png',
text: 'Grid 7'
},
{
url: '/static/c8.png',
text: 'Grid 8'
},
{
url: '/static/c9.png',
text: 'Grid 9'
}
]
}
},
methods: {
change(e) {
let {
index
} = e.detail
this.list[index].badge && this.list[index].badge++
uni.showToast({
title: `点击第${index+1}个宫格`,
icon: 'none'
})
},
add() {
if (this.dynamicList.length < 9) {
this.dynamicList.push({
url: `/static/c${this.dynamicList.length+1}.png`,
text: `Grid ${this.dynamicList.length+1}`,
color: this.dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"
})
} else {
uni.showToast({
title: '最多添加9个',
icon: 'none'
});
}
},
del() {
this.dynamicList.splice(this.dynamicList.length - 1, 1)
}
}
}
</script>
<style lang="scss">
.image {
width: 25px;
height: 25px;
}
.text {
font-size: 14px;
margin-top: 5px;
}
.example-body {
/* #ifndef APP-NVUE */
// display: block;
/* #endif */
}
.grid-dynamic-box {
margin-bottom: 15px;
}
.grid-item-box {
flex: 1;
// position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 0;
}
.grid-item-box-row {
flex: 1;
// position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
padding: 15px 0;
}
.grid-dot {
position: absolute;
top: 5px;
right: 15px;
}
.swiper {
height: 420px;
}
/* #ifdef H5 */
@media screen and (min-width: 768px) and (max-width: 1425px) {
.swiper {
height: 630px;
}
}
@media screen and (min-width: 1425px) {
.swiper {
height: 830px;
}
}
/* #endif */
</style>
API
使用uni-grid组件可以方便地实现各种网格布局,例如展示产品列表、图片墙、导航菜单等。通过灵活的配置,可以满足不同页面的布局需求。