微信小程序-表单笔记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:[]

  },