⼩程序学习笔记（六）----实现简单的⽂章列表（图⽂列
表）效果
写这个之前我在⽹上搜了⼀下，想要先⼀个合适的样例对着写⼀下，这样还简单⼀些，但是了没有到我⼼⾥⾯⽐较合适的，所以⼲脆就直接⾃⼰写⼀下，没有做什么过多的修饰，实现起来还是很简单的。
⾸先来上⼀下效果图：
基本就是这样的简单的图⽂效果，代码也⾮常简单，如果有标题或者⽂章简介的需求也可以⾃⼰加上，⼀看就明⽩了。
⾸先，我们⽤到了以下⼏个标签：
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积分了）：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。