- 本地添加4张图片并显示至页面——组件位置、设置样式、列表渲染
- Q.button是一张图片，需要实现点击这张图片后选择本地图片后显示至页面，不知道怎么让本地图片将button挤到右边 S.在wxml中将本地图片显示区放在button区前面，我将两个区的样式设得一样
- Q.点击button后添加1/多张图片显示至页面的区别 S.列表渲染部分，后者添加的是数组，需要用到_this.data.ObjectArray.concat(res.tempFilePaths)
点击按钮前的页面
点击按钮后的页面
<view class='up-pic'>
<view class='flex'>
<!-- 选择好的图片 -->
<block wx:for="{{imgs}}" wx:key="{{index}}"><!-- 这里写item/index效果一样 -->
<view class='ap-box' >
<view class='add-pic'><!-- 如果这行加wx:if='{{imgs.length<4}}'则包括addpic.png只能加4张照片 -->
<image class='add-pic' src='{{item}}' mode="aspectFill"></image>
</view>
</view>
</block>
<!-- 添加图片按钮 -->
<view class='add-pic' bindtap='addpic' wx:if='{{imgs.length<4}}'>
<image class='add-pic' src='/images/addpic.png'mode="aspectFill"></image>
</view>
</view>
</view>
.up-pic{
width: 100%;
}
.flex{
display: flex;
}
.ap-box{
position: relative;
}
.add-pic{
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
position: relative;
margin: 10rpx;
}
addpic: function (e) {
var _this=this;
wx.chooseImage({
count: 4,//最多可选
sizeType: ['original', 'compressed'],//原图或者缩略图
sourceType: ['album', 'camera'],
success: function (res) {
/*var imgs = res.tempFilePaths;*/ 如果用这行，只能实现点击一次button从本地选择一张图片显示至页面，再点击一次button后第二张图片覆盖第一张图片，不停地在同一位置更换图片，不能添加并显示多张图片
var imgs = _this.data.imgs.concat(res.tempFilePaths); //要添加的数组是res.tempFilePaths,使用concat把多个数组合拼起来
9 /*_this.data.imgs=imgs.length<=4?imgs:imgs.slice(0,4)*/ 这行注释掉也可以
_this.setData({ //将合拼之后的数据，发送到视图层，即渲染页面
imgs: imgs
});
}
})
},
data: {
text:"确定发布",
input:"",
imgs:[]
},