寫這個之前我在網上搜了一下，想要先找一個合適的樣例對著寫一下，這樣還簡單一些，但是找了找沒有找到我心裡面比較合適的，所以乾脆就直接自己寫一下，沒有做什麼過多的修飾，實現起來還是很簡單的。

首先來上一下效果圖：

基本就是這樣的簡單的圖文效果，程式碼也非常簡單，如果有標題或者文章簡介的需求也可以自己加上，一看就明白了。

首先，我們用到了以下幾個標籤：

view：這個沒什麼好說的，在筆記一里面就已經介紹過了，大概類似一個div

block：這個標籤自己本身沒有任何的屬性，僅僅是一個包裝元素，只接受控制元素，在這個的實現裡面用它來進行迴圈的控制

image：圖片標籤

下面是實現的程式碼：

目錄結構：

.wxml

<view class='content'>
<block wx:for="{{artlist}}">
  <view class='artImg'>
    <image src='{{item.imag}}'></image>
  </view>
  <view class='art'>{{item.art}}</view>
</block>
</view>

.wxss

.artImg {
  width: 30%;
}

.art {
  width: 70%;
}

.artImg image {
  width: 100%;
  height: 150rpx;
}

.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
 

.js

Page({
  data: {
    artlist:[
      { imag: '/images/artImg/art1.jpg', art: "1111111111111111111111" },
      { imag: '/images/artImg/art2.jpg', art: "2222222222222222222222" },
      { imag: '/images/artImg/art3.jpg', art: "3333333333333333333333" },
      { imag: '/images/artImg/art4.jpg', art: "4444444444444444444444" },
      { imag: '/images/artImg/art5.jpg', art: "5555555555555555555555" },
      { imag: '/images/artImg/art6.jpg', art: "6666666666666666666666" }
    ]
  }
})
 

如果想要標題和文章簡介，只要稍微修改一下就可以了，目錄結構還是很簡單的。

最後，如果看了我之前的幾篇學習筆記，那麼這幾期的學習筆記合起來可以組成一個完整的頁面，大概的效果就是這個樣子的：

在合在一起的時候，會有一些問題，是關於盒子浮動和絕對定位的一些問題，如果不能解決的話，我會把這個的整個程式碼上傳，如果有需要的話可以下載，下面是下載地址（下載價格1積分，最低只能設定1積分了）：