微信小程序：vant组件库layout布局

1、wxml文件

<!--Layout布局_页面小按钮-->
<view class="tubiao">
<!--设置列元素间距-->
<van-row custom-class="icons"><van-col span="8" custom-class="icons_col"><image src="data:images/ted-icon.png"></image><view>TED</view></van-col><van-col span="8" custom-class="icons_col"><image src="/images/心理学.png"></image><view>心理学</view></van-col><van-col span="8" custom-class="icons_col"><image src="/images/英语.png"></image><view>英语</view></van-col><van-col span="8" custom-class="icons_col"><image src="/images/理财.png"></image><view>理财</view></van-col><van-col span="8" custom-class="icons_col"><image src="/images/编程.png"></image><view>编程</view></van-col><van-col span="8" custom-class="icons_col"><image src="/images/最新.png"></image><view>最新</view></van-col>
</van-row>
</view>

2、wxss页面

/*layout栅格布局*/.tubiao{width: 100%;}.icons{width: 100%;text-align: center;margin:30rpx auto;}.icons_col{height: 170rpx;}.icons_col image{width: 80rpx;height: 80rpx;}

3、页面效果

感谢原作者！
原文转载链接：https://blog.csdn.net/weixin_46531884/article/details/107235773

微信小程序----vant_栅格布局相关推荐

微信小程序沉浸式布局
微信小程序沉浸式布局
微信小程序解决flex布局，最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐实际效果与代码如下: wxml <view class="con- ...
微信小程序之九宫格布局方案
2018转眼即将逝去了,由于近期在弄一个小程序的项目的原因,今天在这里记录一下小程序之九宫格布局方案,以备后期需要和相关知识温习. 对于整个小程序项目,原生开发小程序的方式这里就不多说了,官方有确切的 ...
微信小程序之左右布局
本文以一个简单的小例子,简述在微信小程序开发中左右布局功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,仅供学习分享使用. 概述在微信小程序开发中,左右分栏(左边显示 ...
微信小程序，横向布局，纵向布局
1.概述从Android开发过来的,所以对于wxml 这剪裁至html 的布局还是比较灵活和复杂.Android里是把方向orientation 分为 horizontal 和vertical 2. ...
微信小程序flex弹性布局
微信小程序常用布局为flex.使用flex模型来提高页面布局效率,当页面需要适应不同屏幕大小以及设备类型,该模型一确保元素在恰当的位置. 属性解释默认值其它值 flex-direction 排列 ...
微信小程序开发 — Flex布局
前言微信小程序页面布局方式采用的是Flex布局. Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局. Flex布局提供了元素在容器中的对齐,方向以及顺序 ...
微信小程序开发之布局奇盈绝技
1.微信小程序对flex流式布局支持的相当不错,甚至有些地方可以使用flex进行修复操作如在设置image这个标签的时候,内设有个10rpx的底部空间,假如这个空间背景为黑色,那么10rpx这个底部 ...
微信小程序高度自适应布局
上图是我想要实现的效果,图片和文字描述区域各占屏幕的50%:在微信小程序中的通常做法是内联样式控制.  <view class="&quo ...

微信小程序----vant_栅格布局

微信小程序：vant组件库layout布局

微信小程序----vant_栅格布局相关推荐

最新文章

热门文章