微信小程序----Grid(九宫格)(flex实现九宫格布局)
2023-09-14 09:01:36 时间
效果二维码
效果图
WXML
<view class="section">
<view class="tui-table-view">
<view class="tui-col-3">
<icon class="iconfont icon-shouye"></icon>
<view>Home</view>
</view>
<view class="tui-col-3">
<icon class="iconfont icon-xinfeng"></icon>
<view>Email</view>
</view>
<view class="tui-col-3">
<icon class="iconfont icon-duihuaxinxi"></icon>
<view>Chat</view>
</view>
<view class="tui-col-3">
<icon class="iconfont icon-dibiao"></icon>
<view>location</view>
</view>
<view class="tui-col-3">
<icon type="search" size='30'></icon>
<view>search</view>
</view>
<view class="tui-col-3">
<icon class="iconfont icon-dianhua"></icon>
<view>phone</view>
</view>
<view class="tui-col-3">
<icon class="iconfont icon-shezhi"></icon>
<view>setting</view>
</view>
<view class="tui-col-3">
<icon type="info" size='30' color='#797979'></icon>
<view>about</view>
</view>
<view class="tui-col-3">
<icon class="iconfont icon-gengduotianchong"></icon>
<view>more</view>
</view>
</view>
</view>
WXSS
.tui-table-view{
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.tui-col-3{
flex: 0 0 auto;
width: 33.33333333%;
text-align: center;
color: #797979;
padding: 40rpx 0;
font-size: 30rpx;
}
总结
1、使用flex进行布局要注意兼容性,所以采用:display: -webkit-flex;display: flex;
2、为了保证每排三个图标的两对对齐,采用:justify-content: space-between;
3、父元素必须设置flex-wrap: wrap;进行换行,否则会在一排展示;
4、每个子元素的宽度width: 33.33333333%;必须写出,否则会按照其占位大小分配;
5、每个子元素设置flex: 0 0 auto;否则某个子元素超出,会改变其他元素大小!
WXRUI体验二维码
如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!
其他
相关文章
- 微信小程序从注册到上线系列
- WordPress 网站开发“微信小程序“实战(二)
- PHP实现微信提现功能
- 微信小程序开发(十)获取手机的经纬度
- 微信小程序:在开发测试时使用非业务域名(微信: 8.0.32)
- signalr 应用于微信小程序(二)
- uni-app:微信小程序:保存图片到相册(hbuilderx 3.7.3)
- 微信小程序----全局状态管理 (便于全局埋点等操作)
- 微信小程序----Gallery Table(图文表格)(flex布局实现MUI的图文表格)
- 微信小程序----返回上一页刷新或当前页刷新
- 微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)
- 微信小程序----map组件实现(高德地图API实现wx.chooseLocation(OBJECT))
- 微信小程序----switch组件实现
- 微信小程序----实现YDUI的ScrollNav组件(滚动导航)
- 微信小程序----界面交互反馈API(wx.showToast(OBJECT)、wx.showModal(OBJECT))(MUI消息框)
- 微信小程序----导航栏透明渐变二(MUI导航栏透明渐变)
- 微信小程序开发系列 (二) :微信小程序的单步调试和控制器实现步骤概述
- 微信小程序开发系列教程三:微信小程序的调试方法
- 微信小程序登录流程总结 目录 1.1. 前端调用wx.login 。。给后端传递一个code1 1.2. 开发者需要在开发者服务器后台调用 auth.code2Session,使用 code 换取
- Java Web项目,Android和微信小程序的初始页面配置
- hbuilder X发布微信小程序失败的解决方法
- 如何创建开发uniapp微信小程序项目?详细步骤教程
- 微信小程序UI框架有哪些?
- 微信小程序UI框架之【weui】怎样使用
- uniapp微信小程序怎样获取宽高?获取系统信息?微信小程序 获取用户手机屏幕高度与宽度信息等
- 【java】Java生成微信小程序二维码
- webstorm开发微信小程序
- cgi程序读取post发送的特殊字符,尤其适合于微信公众平台开发中发送被动消息
- 微信支付出现故障,程序员的高薪理所当然
- uniapp微信小程序onShareAppMessage 函数实现分享功能和实例页面代码
- 微信公众号嵌套H5获取用户openid等相关信息接口汇总