微信小程序实现展示图片（图片推广小程序可以使用）

实现效果图：

首先就是这个封面是一些图片展示界面，后台返回的都是图片。然后根据返回数据数组的下标进行分类，第一排只显示数组为1，4，7一次类推，第二列是2，5，8的index，第三列是3，6，9等等，根据下标进行分类然后排版。没一列都网上堆叠即可。

上代码：wxml

<view class='top' style="opacity:{{maskshow?'0.8':'none'}}"><view wx:if="{{showdapei==1}}" class='top' style="opacity:{{maskshow?'0.8':'none'}}"><view class='content_list'><view class='item_pic'><view wx:for="{{image_url}}" wx:key="item" style='width:100%;' bindtap='playvideobtn'><view style=' margin 2rpx;padding-left:01rpx; position:relative;'><image wx:if="{{image_url[index].selected&&(index+1)%3==1}}" data-index="{{index}}" src='http://cdzhongdan.oss-cn-/yinuo/%E5%AF%B9%E5%8B%BE%E9%80%89%E4%B8%AD.png' bindtap='duigou' style='position:absolute;width:50rpx;height:50rpx;margin:60% 45%;'></image><image wx:if="{{(index+1)%3==1}}" style="width:98% ;" src='{{item.poster}}' lazy-load data-pic_url='{{item}}' data-index="{{index}}" bindtap="playvideo" class='image_style' mode='widthFix'></image></view></view></view><view class='item_pic'><view wx:for="{{image_url}}" wx:key="item" style='width:100%;' bindtap='playvideobtn'><view style=' margin 2rpx;padding-right:0rpx; position:relative;'><image wx:if="{{image_url[index].selected&&(index+1)%3==2}}" data-index="{{index}}" src='http://cdzhongdan.oss-cn-/yinuo/%E5%AF%B9%E5%8B%BE%E9%80%89%E4%B8%AD.png' bindtap='duigou' style='position:absolute;width:50rpx;height:50rpx;margin:60% 45%;'></image><image wx:if="{{(index+1)%3==2}}" style="width:98%;height:{{index==1?'320rpx':''}} ;" src='{{item.poster}}' lazy-load data-pic_url='{{item}}' data-index="{{index}}" bindtap="playvideo" class='image_style {{index==1?"":""}}' mode='{{index==1?"":"widthFix"}}'></image></view></view></view><view class='item_pic'><view wx:for="{{image_url}}" wx:key="item" style='width:100%;' bindtap='playvideobtn'><view style=' margin 2rpx; position:relative;'><image wx:if="{{image_url[index].selected&&(index+1)%3==0}}" data-index="{{index}}" src='http://cdzhongdan.oss-cn-/yinuo/%E5%AF%B9%E5%8B%BE%E9%80%89%E4%B8%AD.png' bindtap='duigou' style='position:absolute;width:50rpx;height:50rpx;margin:60% 45%;'></image><image wx:if="{{(index+1)%3==0}}" src='{{item.poster}}' style="width: 98%;height:{{index==2?'370rpx':''}};" data-pic_url='{{item}}' data-index="{{index}}" bindtap="playvideo" class="image_style " mode='{{index==2?"":"widthFix"}}'></image></view></view></view></view></view></view>

WXSS：

.content_list {width: 100%;display: flex;flex-direction: row;justify-content: space-around;align-items: flex-start;margin-left:5rpx;/* border: 1px solid #f0f0f0; */}.item_pic {display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;width: 50%;flex-wrap: wrap;}.top{width: 100%;height:auto;background-color: white;z-index: 1;}

顺便分享一波个人公众号,关注关注我呗，分享一些你们需要的资源，大家一起进步。

会分享一些视频资源的哦

如果觉得《微信小程序实现展示图片（图片推广小程序可以使用）》对你有帮助，请点赞、收藏，并留下你的观点哦！