你好，我用微信小程序的wx:for+flex实现类似Android的gradview的多列列表效果。关于审核的疑问#微信小程序开发。其中最后一个item是添加，需要使用wx:if判断进行组合。


实现了该效果发现，不同类型的item(通过wx:if/elif区别)会具有另外一个padding(or margin)。
下图中的添加按钮是wx:elif中的，可以看到他跟前面的图片和上面的图片不对齐。但是其实图片的样式都是一致的，而且，尝试了设置padding和margin为0都不行。还是无法对齐。






具体的WXML代码如下：



添加描述

描述 :


点击加号从相册选取照片












上传之后所有人可以看到哦




具体的css如下：
/* pages/album/upload/UploadAlbumsPage.wxss */

page {
display: block;
min-height: 100%;
background-color: #f4eff4;
}

.upload-root {
display: flex;
flex: 1;
overflow: hidden;
width: 100%;
height: 100%;
flex-direction: column;
}

.upload-desc {
margin-top: 28rpx;
margin-bottom: 16rpx;
color: #7d7f80;
font-size: 24rpx;
margin-left: 20rpx;
}

.upload-input-root {
padding-left: 20rpx;
padding-right: 20rpx;
display: flex;
flex-direction: row;
height: 112rpx;
align-items: center;
background-color: #fff;
width: 100%;
}

.upload-input-root text {
font-size: 32rpx;
color: #272a2c;
}

.upload-input {
flex: 1;
height: 100%;
font-size: 32rpx;
}

.upload-input-tip {
margin-right: 10rpx;
}

.upload-input-holder {
font-size: 32rpx;
margin-top: 2rpx;
color: #bebfbf;
}

.upload-images-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: #fff;
padding-top: 20rpx;
padding-left: 13rpx;
padding-right: 13rpx;
padding-bottom: 20rpx;
}

.upload-images-list {
width: 25%;
}

.upload-images-item {
display: flex;
flex-direction: column;
}

.upload-images-image {
align-self: center;
background-color: #d8d8d8;
width: 160rpx;
margin: 7rpx;
height: 160rpx;
}

.upload-images-image-add {
align-self: center;
background-color: #d8d8d8;
width: 160rpx;
margin: 7rpx;
display: flex;
height: 160rpx;
justify-content: center;
align-items: center;
}

.upload-images-image-holder {
align-self: center;
width: 70%;
height: 70%;
}

.upload-bottom-tips {
flex: 1;
margin-top: 200rpx;
margin-bottom: 100rpx;
justify-content: center;
align-self: center;
align-items: center;
font-size: 28rpx;
color: #7d7f80;
}

js文件

Page({

/**
* 页面的初始数据
*/
data: {
urls: ["http://www.usaaces.com/uploads/test.jpg", "http://www.lolwot.com/wp-content/uploads/2018/03/golden-labrador-puppy-.jpg",
"http://pics.sc.chinaz.com/files/pic/pic9/201508/apic14052.jpg",
"http://www.xinhuanet.com/photo/2013-09/25/125441013_11n.jpg",
"https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/4d086e061d950a7bc5f62ae703d162d9f3d3c9d6.jpg",
"../../../res/rc_pic_uploading_add.png"],
fname: "",
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const { urls, fname } = options;
console.log(urls)
console.log(fname)
this.setData({ fname: fname });
},

})






微信小程序开发相关问题解答；本文来自微信小程序工厂 http://www.xcxgc.com 转载请保留。

本文网址：http://www.91bianli.com/kaifazhinan/65487.html