微信小程序学习笔记（六）----实现简单的文章列表（图文列表）效果

写这个之前我在网上搜了一下，想要先找一个合适的样例对着写一下，这样还简单一些，但是找了找没有找到我心里面比较合适的，所以干脆就直接自己写一下，没有做什么过多的修饰，实现起来还是很简单的。

首先来上一下效果图：

基本就是这样的简单的图文效果，代码也非常简单，如果有标题或者文章简介的需求也可以自己加上，一看就明白了。

首先，我们用到了以下几个标签：

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积分了）：

https://download.csdn.net/download/qq_24127447/10776962