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

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

1、wxml文件

<!--Layout布局_页面小按钮-->
<view class="tubiao">
<!--设置列元素间距-->
<van-row custom-class="icons">
  <van-col span="8" custom-class="icons_col">
    <image src="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.youkuaiyun.com/weixin_46531884/article/details/107235773