这么简介大方的组件 真的不难,快抄到你项目里去,抄会了就是你的!

首先页面部分:

 <区块 类名="标题">带图文章列表</区块>
	    <区块 类名="图片组">
	        <图片框 类名="图1 图片" 图像地址="@文件_a1.jpg" 缩放模式="高度缩放"></图片框>
	        <图片框 类名="图片" 图像地址="@文件_a2.jpg" 缩放模式="高度缩放"></图片框>
	        <图片框 类名="图2 图片" 图像地址="@文件_a3.jpg" 缩放模式="高度缩放"></图片框>
	    </区块>

一个标题,一组图片,这组图片你想放多少都行,一行不够也可以两行. 这里仅提供一行的写法.

图片框的缩放模式 我一般都喜欢用高度缩放.

把这三个图片框放到一个区块里 , 是为了用弹性布局把他们做成一行的

然后是样式部分:

<样式>
page{
    内边距: 20rpx;
}
    .标题{
        字体-大小: 30rpx;
        字体-粗细: 粗体;
    }
	.图片组{
	   显示模式: 弹性布局;
	   内边距: 15rpx;
	}
	.图1{
	     边框-圆角: 30rpx 0 0 30rpx;
	}
	.图2{
	     边框-圆角:0 30rpx 30rpx 0;
	}
	.图片{
	    宽度: 33%;
	    内边距: 0 4rpx;
	}
</样式>

把两端的图片框外露的角做成圆角,效果就有了.

源码里复制粘贴了三个,是为了方便示范,如果要运用到项目中 还是要通过数组数据循环生成标签

最后附上代码1679438815416205.zip

采纳500+送小米笔记本电脑