微信小程序-表单笔记2

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

 

 

posted @ 2019-04-25 11:15  稻草人demo  阅读(309)  评论(0)    收藏  举报