写这个之前我在网上搜了一下,想要先找一个合适的样例对着写一下,这样还简单一些,但是找了找没有找到我心里面比较合适的,所以干脆就直接自己写一下,没有做什么过多的修饰,实现起来还是很简单的。
首先来上一下效果图:
基本就是这样的简单的图文效果,代码也非常简单,如果有标题或者文章简介的需求也可以自己加上,一看就明白了。
首先,我们用到了以下几个标签:
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积分了):