小程序-列表、网格的使用

在学习列表，网格前，我们先看下wx:for的使用
基本语法

<view>
    <block wx:for="{{[1,2,3,4]}}">
        <text>{{item}}</text>
    </block>
</view>

wx:for-item：用于指定数组当前元素的变量名，默认为item
wx:for-index：用于指定数组当前下标的变量名，默认为index

注：不提供 wx:key，会报一个 warning

一、列表的使用

<view>
    <block wx:for="{{[1,2,3,4]}}" wx:key="key" wx:index="idx" wx:for-item="itemName">
        <text>{{itemName}}</text>
    </block>
</view>

如果的它并不是单一的array，存入的是对象那我们如何处理呢？？？
这并不复杂
我们只需通过绑定的当前元素名去获取该对象的值就可以了

代码示例

<view>
    <block wx:for="{{array}}" wx:key="key" wx:index="idx" wx:for-item="item">
        <view class="item-container" bindtap="toDetail" data-item="{{item}}">
            <text>{{item.name}}</text>
            <text>{{item.age}}</text>
        </view>
    </block>
</view>

.wxss

.item-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  border-bottom: #f2f2f2 1rpx solid;
}

.item-container text {
  width: calc(50% - 15rpx);
  padding-left: 15rpx;
  text-align: center;
  margin: 0 auto;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #666;
}

.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    array: [
      { name: "张三", age: 21 },
      { name: "李浩", age: 20 },
      { name: "王明", age: 19 },
      { name: "张三", age: 21 },
      { name: "李浩", age: 20 },
      { name: "王明", age: 19 },
      { name: "张三", age: 21 },
      { name: "李浩", age: 20 },
      { name: "王明", age: 19 }
    ]
  },
  toDetail(e) {
    var item = e.currentTarget.dataset.item.name;
    wx.showToast({
      title: '点击了 ' + item,
      duration: 1500
    })
  },
}

页面效果

image.png

二、网格布局的使用

<view>
    <view class="grid-container">
        <text class="grid-item" wx:for="123456789">{{item}}</text>
    </view>
</view>

.grid-container {
  display: grid; 
  margin: 30rpx 15rpx 30rpx 15rpx;
  grid-template-columns: repeat(auto-fill, calc(33.3333% - 30rpx)); /** 平铺宽度 */
  grid-template-rows: auto; /** 设置高度为  */
  grid-auto-rows: auto;/** 当容易高度不够时，多余的组件高度将怎么分配，默认的高度由单元格内容决定 */
  justify-content: center; /** 水平居中  */
  grid-gap: 30rpx;  /** 水平和垂直间距*/
  align-items: center;
}

.grid-item {
  border: 1px solid #e5e4e9;
  display: flex;
  height: 200rpx;
  align-items: center;
  justify-content: center;
}

效果图片

image.png