微信小程序-表单笔记2

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

1. Q.button是一张图片，需要实现点击这张图片后选择本地图片后显示至页面，不知道怎么让本地图片将button挤到右边  S.在wxml中将本地图片显示区放在button区前面，我将两个区的样式设得一样
2. 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:[]
  },