微信小程序-表单笔记2

本地添加4张图片并显示至页面——组件位置、设置样式、列表渲染

Q.button是一张图片，需要实现点击这张图片后选择本地图片后显示至页面，不知道怎么让本地图片将button挤到右边 S.在wxml中将本地图片显示区放在button区前面，我将两个区的样式设得一样
Q.点击button后添加1/多张图片显示至页面的区别 S.列表渲染部分，后者添加的是数组，需要用到_this.data.ObjectArray.concat(res.tempFilePaths)

　　　点击按钮前的页面

　　　点击按钮后的页面

 1 <view class=\'up-pic\'>
 2   <view class=\'flex\'>
 3       <!-- 选择好的图片 -->
 4       <block wx:for="{{imgs}}" wx:key="{{index}}"><!-- 这里写item/index效果一样 -->
 5         <view class=\'ap-box\'  >
 6           <view class=\'add-pic\'><!-- 如果这行加wx:if=\'{{imgs.length<4}}\'则包括addpic.png只能加4张照片 -->
 7             <image class=\'add-pic\' src=\'{{item}}\' mode="aspectFill"></image>
 8           </view>
 9         </view>
10       </block>
11       <!-- 添加图片按钮 -->
12       <view class=\'add-pic\' bindtap=\'addpic\' wx:if=\'{{imgs.length<4}}\'>
13         <image class=\'add-pic\' src=\'/images/addpic.png\'mode="aspectFill"></image>
14       </view>
15   </view>
16 </view>

 1 .up-pic{
 2   width: 100%;
 3 }
 4 .flex{
 5   display: flex;
 6 }
 7 .ap-box{
 8   position: relative;
 9 }
10 .add-pic{
11   width: 160rpx;
12   height: 160rpx;
13   margin-right: 20rpx;
14   position: relative;
15   margin: 10rpx;
16 }

 1   addpic: function (e) {
 2     var _this=this;
 3     wx.chooseImage({
 4       count: 4,//最多可选
 5       sizeType: [\'original\', \'compressed\'],//原图或者缩略图
 6       sourceType: [\'album\', \'camera\'],
 7       success: function (res) {

/*var imgs = res.tempFilePaths;*/  如果用这行，只能实现点击一次button从本地选择一张图片显示至页面，再点击一次button后第二张图片覆盖第一张图片，不停地在同一位置更换图片，不能添加并显示多张图片

 8 var imgs = _this.data.imgs.concat(res.tempFilePaths);  //要添加的数组是res.tempFilePaths,使用concat把多个数组合拼起来
 9 /*_this.data.imgs=imgs.length<=4?imgs:imgs.slice(0,4)*/ 这行注释掉也可以
10  _this.setData({ //将合拼之后的数据，发送到视图层，即渲染页面

11  imgs: imgs
12  });
13  }
14  })
15 },

 data: {
    text:"确定发布",
    input:"",
    imgs:[]
  },