uView Grid 宫格布局

本文主要是介绍uView Grid 宫格布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。

#平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

#基本使用

• 该组件外层为u-grid组件包裹，通过col设置内部宫格的列数
• 内部通过u-grid-item组件的slot设置宫格的内容
• 如果不需要宫格的边框，可以设置border为false

<template><view><u-grid:border="false"@click="click"><u-grid-itemv-for="(baseListItem,baseListIndex) in baseList":key="baseListIndex"><u-icon:customStyle="{paddingTop:20+'rpx'}":name="baseListItem.name":size="22"></u-icon><text class="grid-text">{{baseListItem.title}}</text></u-grid-item></u-grid><u-toast ref="uToast" /></view>
</template><script>export default {data() {return {baseList: [{name: 'photo',title: '图片'},{name: 'lock',title: '锁头'},{name: 'star',title: '星星'},]}},methods: {click(name) {this.$refs.uToast.success(`点击了第${name}个`)}}}
</script><style lang="scss">.grid-text {font-size: 14px;color: #909399;padding: 10rpx 0 20rpx 0rpx;/* #ifndef APP-PLUS */box-sizing: border-box;/* #endif */}
</style>

copy

#绑定点击事件&自定义列数

<template><view><u-grid:border="false"col="4"><u-grid-itemv-for="(listItem,listIndex) in list":key="listIndex"><u-icon:customStyle="{paddingTop:20+'rpx'}":name="listItem.name":size="22"></u-icon><text class="grid-text">{{listItem.title}}</text></u-grid-item></u-grid><u-toast ref="uToast" /></view>
</template><script>export default {data() {return {list: [{name: 'photo',title: '图片'},{name: 'lock',title: '锁头'},{name: 'star',title: '星星'},{name: 'hourglass',title: '沙漏'},{name: 'home',title: '首页'},{name: 'star',title: '音量'},],}},methods: {click(name) {this.$refs.uToast.success(`点击了第${name}个`)}}}
</script><style lang="scss">.grid-text {font-size: 14px;color: #909399;padding: 10rpx 0 20rpx 0rpx;/* #ifndef APP-PLUS */box-sizing: border-box;/* #endif */}
</style>

copy

#实现宫格的左右滑动

结合uni的swiper组件可以实现宫格的左右滑动，因为swiper特性的关系，请指定swiper的高度 ，否则swiper的高度不会被内容撑开，可以自定义swiper的指示器，达到更高的灵活度

<template><view><swiper:indicator-dots="true"class="swiper"><swiper-item><u-grid :border="true"><u-grid-item:customStyle="{width:220+'rpx',height:220+'rpx'}"v-for="(item, index) in swiperList":index="index":key="index"><u-icon:customStyle="{paddingTop:20+'rpx'}":name="item":size="22"></u-icon><text class="grid-text">{{ '宫格' + (index + 1) }}</text></u-grid-item></u-grid></swiper-item><swiper-item><u-grid :border="true"><u-grid-item:customStyle="{width:220+'rpx',height:220+'rpx'}"v-for="(item, index) in swiperList":index="index + 9":key="index"><u-icon:customStyle="{paddingTop:20+'rpx'}":name="item":size="22"></u-icon><text class="grid-text">{{ '宫格' + (index + 1) }}</text></u-grid-item></u-grid></swiper-item><swiper-item><u-grid :border="true"><u-grid-item:customStyle="{width:220+'rpx',height:220+'rpx'}"v-for="(item, index) in swiperList":index="index + 18":key="index"><u-icon:customStyle="{paddingTop:20+'rpx'}":name="item":size="22"></u-icon><text class="grid-text">{{ "宫格" + (index + 1) }}</text></u-grid-item></u-grid></swiper-item></swiper></view>
</template><script>export default {data() {return {swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],};}};
</script><style lang="scss">.swiper {height: 720rpx;}.grid-text {font-size: 14px;color: #909399;padding: 10rpx 0 20rpx 0rpx;/* #ifndef APP-PLUS */box-sizing: border-box;/* #endif */}
</style>

这篇关于uView Grid 宫格布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---