小程序实现一维或多维数组的每行三列数据显示

宥个袋袋

于 2019-02-28 14:52:21 发布

阅读量4.5k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序 wx:for循环每行三列

本文链接：https://blog.youkuaiyun.com/weixin_43760090/article/details/88028589

版权

本文介绍了如何在微信小程序中使用wx:for循环实现一维和多维数组的数据，以每行三列的形式进行显示。针对一维数组，提供了.js、.wxml和.wxss文件的实现细节。对于多维数组，文章引用了其他博主的方法进行展示，来源于优快云上的Mattscl的一篇文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序实现一维或多维数组的每行三列数据显示

一维数组：
效果图

在这里插入图片描述

.js文件
data: {

devData: ["aa", "vv", "bbb",
           "rer", "gg", "gggr",
           "rrr", "jyt", "yhy",
            "hyth", "hyyt", "hythyh"],

.wxml文件


<block wx:for="{
  {devData}}" wx:for-index="i" wx:for-item="item" >   
            <view class='onehandle5'>
                  <block wx:for="{
  {3}}" wx:for-index="k" wx:for-item="item_k" >
                        <view wx:if="{
  {devData[i+item_k] != null && i%3 == 0 }}" class="useage2">{
  {devData[i+item_k]}}</view>
                  </block>
            </view>
   </block>

.wxss文件


.onehandle5{
  display: flex;
  flex-direction: row;
}

.useage2{
  width: 170rpx;
  margin: 12rpx 7rpx;
  height: 100rpx;
  background-color: #f3f0f0;
  text-align: cen