请教一下像微信朋友圈这个图片的wxss怎么写
发布于 6 年前 作者 xiuyinglin 11069 次浏览 来自 问答

类似这样的样子，图片的数量也是一样的最多9张 哪位大神能给帮助一下吗？

10 回复

这个应该是属于flex布局问题吧，图片张数控制应该是动态控制wx.chooseImage(）里面的count值

作为一个Android开发来说，实现它就写死9个下来image，根据数组长度来判断显示几个,办法总是有的，只是看你是否愿意用

加油

朋友圈九宫格布局，只有一个难点儿，如何生成一个1：1的盒子，并且在不同屏幕上展示效果都正常。

可以去了解一下padding和margin的百分比是以什么为参照物~

详细demo看这个：

http://demos.pxuexiao.com/scale/wx.html

也可以考虑display: grid 布局

自己先试着写一个吧

web 里最喜欢用的一个样式 就是   div{width:30%;padding:30% 0 0 0;background:no-repeat center;background-size:cover;float:left;position: relative;overflow: hidden;}  div img{position: absolute;top:0;left:0;right:0;bottom:0;}

.main-content-imageList{

width: 100%;

display: flex;

flex-wrap: wrap;

}

.main-content-imageList-item{

margin-bottom: 6rpx;

width: 246rpx;

height: 246rpx;

line-height: 0;

position: relative;

}

.main-content-imageList-item:nth-child(3n+2){

margin-left: 6rpx;

margin-right: 6rpx;

}

感受一下

对对对。你们说的都对

谢谢大家 好热情啊，谢谢大家，目前已差不多达到我要的样子了，谢谢大家

.view{

display:flex;

flex-wrap:wrap;

justify-content:space-between;

}

回到顶部