宫格

简介

宫格组件。

效果图

属性

属性	类型	必填	备注
column	Number	是	每行显示个数，默认为3
itemSpace	Number	是	每个宫格之间的间距，默认为2，注：单位为百分比

基本用法

<bugking7-grid :column="2"><bugking7-grid-item v-for="(item,index) in items" :key="index"><view class="item_wrap">{{item.title}}</view></bugking7-grid-item>
</bugking7-grid>import bugking7_grid from '../../components/bugking7-grid/bugking7-grid.vue'
import bugking7_grid_item from '../../components/bugking7-grid-item/bugking7-grid-item.vue'
data:{return {items:[{title:'文本'},{title:'文本'}]}
}methods: {}

兼容性

微信、QQ小程序、Android、Edge实测没问题，IOS没有本子尚未测试。

其他

遇到问题欢迎评论指出，感谢你的关注和支持。

demo
uniapp插件下载

【蝴蝶壁纸】QQ小程序，每天分享免费壁纸！

【缘来是星座】微信小程序，每天1点、7点、17点更新十二星座运势，还可以查看你的他（她）和你是否配对奥！

【uniapp前端组件】宫格相关推荐

基于canvas+uniapp的9宫格拼图游戏组件
基于 canvas+uniapp 的 9 宫格拼图游戏涉及到的 canvas 基础知识创建画布 <canvas id="'c1'"></canvas> ...
【前端多宫格卡片自适应，再也不怕多宫格布局啦】
前言有没有小伙伴有遇到过对样式追求极致的产品啊=== 为了这页面的样式我也是没少下功夫,总结了这几个多宫格小方法, 以后再也不怕多宫格自适应问题了,尤其是不确定个数的多宫格!话不多说,展示才艺吧- ...
【uniapp前端组件】自定义车牌键盘
自定义车牌输入键盘–车牌键盘简介本组件根据自定义万能键盘(数字键盘.身份证键盘.带小数点数字键盘.车牌键盘)升级而来,老组件代码有点看不懂了,哈哈哈哈.另外数字键盘.身份证键盘.小数点数字键盘un ...
【uniapp前端组件】仿美团外卖商品列表
仿美团外卖商品列表简易实现美团外卖商品列表,没什么技术难点,简单来说就是两个scroll-view协作,并且两个scroll-view不会滑动冲突. 实际效果仿美团外卖商品列表实际项目效果简介 ...
【uniapp前端组件】仿微信通讯录列表组件
仿微信通讯录列表组件示例图前言仿微信通讯录列表组件,可实现通讯列表以及选择多个联系人功能. 组件介绍本组件有三个自定义组件构成,都已经集成在bugking7-contact-list中,该组件 ...
HTML 前端 flex宫格布局
本文档为个人博客文档系统的备份版本.作者:小游.作者博客:点击访问之前我的哔哩哔哩追番页面显示是通过float来实现的,但是我现在才发现有flex这个东西,所以我们只需要在追番界面的父布局里面加上f ...
java 9宫格抽奖_前端js实现九宫格模式抽奖（多宫格抽奖）
介绍: 前端九宫格是一种常见的抽奖方式,js实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. 四宫格抽奖 ...
vantUI组件：Grid宫格 - 案例篇
vantUI组件:Grid宫格 - 案例篇效果图 · 截图: 代码: <van-grid clickable direction="horizontal" :border= ...
MUI 宫格组件（grid）怎么取消mui-active背景色？（优先级设置问题）- 踩坑篇
MUI 宫格组件(grid)怎么取消mui-active背景色?(优先级设置问题) 对比 · 截图如下: 踩坑总结 · 点击取消效果 · 举例: 优先级: background > backgr ...

【uniapp前端组件】宫格

宫格

简介

效果图

属性

基本用法

兼容性

其他

【uniapp前端组件】宫格相关推荐

最新文章

热门文章