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

发布于 7 年前作者 xiuyinglin11239 次浏览最后编辑 7 年前来自 ask

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

10 回复
gkang
gkang1 楼6 年前

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

gangduan
gangduan2 楼6 年前

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

jun18
jun183 楼6 年前

加油

xiuying73
xiuying734 楼6 年前

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

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

详细demo看这个:

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

也可以考虑display: grid 布局

lzeng
lzeng5 楼6 年前

自己先试着写一个吧

xiulangao
xiulangao6 楼6 年前

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
gongna7 楼6 年前

.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
jyao8 楼6 年前

对对对。你们说的都对

laijuan
laijuan9 楼6 年前

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

luoguiying
luoguiying10 楼5 年前

.view{

display:flex;

flex-wrap:wrap;

justify-content:space-between;

}