请教一下像微信朋友圈这个图片的wxss怎么写 - WXOPEN Club

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

gkang 1楼•4 年前

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

gangduan 2楼•4 年前

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

jun18 3楼•4 年前

加油

xiuying73 4楼•4 年前

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

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

详细demo看这个：

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

也可以考虑display: grid 布局

lzeng 5楼•4 年前

自己先试着写一个吧

xiulangao 6楼•4 年前

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;}

gongna 7楼•4 年前

.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;

}

感受一下

jyao 8楼•4 年前

对对对。你们说的都对

laijuan 9楼•4 年前

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

luoguiying 10楼•3 年前

.view{

display:flex;

flex-wrap:wrap;

justify-content:space-between;

}