微信小程序自定义宫格

wxml

<view class="con">
<!-- 两个为一组 -->
<view class="item" wx:for="{{dataList}}" wx:for-index="idx" wx:if="{{idx%2==0}}">
    <!-- 左边方框 -->
    <view class="items">
      <image src="{{dataList[idx].picUrl}}"></image>
      <view>{{dataList[idx].picExplain}}</view>
    </view>
    <!-- 右边方框 -->
    <view class="items" >
      <image src="{{dataList[idx+1].picUrl}}"></image>
      <view>{{dataList[idx+1].picExplain}}</view>
    </view>
</view>
</view>

// pages/details/details.js
const app = getApp();
const api = require('../../common/api.js');
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
 
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     console.log(options.title)
     var title = options.title;
     var that = this;
    wx.request({
      url: api.SelectByType,
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        picType: title,
      },
      success: function (res) {
        console.log(res)
        that.setData({
          dataList:res.data,
        })
      }
    })
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  }
})

.con{
    display: flex;
  flex-direction: column;
}
 
.item{
  width: 100%;
  display: flex;
  flex-direction: row;
align-items: center;
justify-content: center;
}
.items{
  width: 40%;
  height: 350rpx;
  background-color: white;
  margin: 20rpx;
  border-radius: 20rpx;
   display: flex;
  flex-direction: column;
align-items: center;
justify-content: center;
  
}
.items image{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
margin-bottom: 10rpx;
 
}
.items view{
  width: 100%;
  margin-top: 20rpx;
border-top: 1rpx solid #999;
text-align: center;
 
}

关注我的公众号SpaceObj 领取idea系列激活码