微信小程序图片两栏显示

1、打开开发者工具，在项目的pages下新建文件夹mypage，并在文件夹内新建页面mypage，并在app.json中将mypage设为第一页面

2、在mypage文件夹下放入三张图片

3、在mypage.js文件中创建一个数组数据，代码如下：data: { xxxx:['1.jpg','2.jpg','3.jpg']},

4、在mpyage.wxml中写代码如下：<view class="content"><view wx:for="{{xxxx}}" class="item"> <image src="{{item}}" mode="aspectFill"> </image></view></view>

5、在mypage.wxss中写代码如下：.content{display: flex;justify-content: space-between;flex-wrap:wrap;}.item{width: 750rpx;margin: 0 0 20rpx 0;}.item image{width: 100%;height: 450rpx;}750rpx就是全屏幕宽度

6、保存代码，编译运行模拟器效果如下图

7、知道了满屏状态，两栏显示就容易了，修改mypage.wxss代码如下：.content{displa烤恤鹇灭y: flex;justify-content: space-between;flex-wrap:wrap;}.item{width: 375rpx;margin: 0 0 20rpx 0;}.item image{width: 100%;height: 450rpx;}

8、保存代码，模拟器效果如下图