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

使用Vant组件库实现微信小程序的栅格布局

最新推荐文章于 2024-05-09 16:36:12 发布

原创最新推荐文章于 2024-05-09 16:36:12 发布 · 2.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #layout

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在微信小程序中利用Vant UI组件库创建布局，特别是列元素间距设置，展示了代码示例，包括WXML和WXSS文件的内容，实现了图标和文字的排列展示。通过调整样式，达到了美观的页面效果。

微信小程序：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