微信小程序push数据到data列表渲染到页面

遇到问题不要慌

push数据data 渲染到页面实现效果图

点击上传图片，在页面会渲染多一个照片列表


点击删除会减少一个图片列表渲染

要实现的功能已经介绍完了，（就不说废话了，上代码）

.wxml文件

<view class="uploadPic-content">
          <view class="uploadPic-info" wx:for="{{imgListArr}}" wx:key="{{index}}">
            <view class="uploadPic-info-header">
              <view class="img-tit">照片{{index+1}}</view>
              <view class="delete" bindtap="delPicture">删除</view>
            </view>
            <view class="item">
              <text>照片标题 *</text>
              <input name="imgTitle" type="text" placeholder="请输入" />
            </view>
            <view class="item">
              <text>拍摄方向 *</text>
              <input name="imgDirection" type="text" placeholder="请输入" />
            </view>
            <view class="item-addImg">
                <view class="addImg" bindtap="toUploadImg">
                    <image src="../images/uploadImg.png"></image>
                    <text class="addImg-tit" >上传图片</text>
                </view>
            </view>
          </view>
    </view>
    <view class="uploadPic">
        <view class="upload-img" bindtap="addShowMadel">上传图片</view>
    </view>

wxss.文件

page{
    background-color: #f3f4f5;
    min-height: 100vh ;
}
.uploadPic{
    padding: 30rpx 80rpx;
  }
  .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 98rpx;
    padding: 0 30rpx;
    border-bottom: 2px solid #F4F5F6;
    background-color: #fff;
    font-size: 28rpx;
  }
  input{
    text-align: right;
  }
  .upload-img{
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border: 1px dashed #999;
    opacity: 1;
    border-radius: 20rpx;
    font-size: 36rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  .uploadPic-info-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
  }
  .uploadPic-info-header .img-tit{
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
  .uploadPic-info-header .delete{
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #E70012;
  }
  
  .item-addImg{
    padding: 30rpx;
    background-color: #fff;
  }
  
  .addImg{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 214rpx;
    height: 214rpx;
    border: 1px solid #B5B5B5;
    border-radius: 13px;
    text-align: center;
  
  }
  
  .addImg image{
    width: 80rpx;
    height: 80rpx;
  }
  
  .addImg .addImg-tit{
    margin-top: 10rpx;
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999;
  }

.js文件

// pages/uploadImg/uploadImg.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        imgListArr:[
              {
              imgTitle: '' , //照片标题
              imgDirection: '' , //拍摄方向
            }
          ],  //上传图片   
    },
      // 添加图片数组
  addShowMadel(){
    let picture = {
      imgTitle: '', //照片标题
      imgDirection: '', //拍摄方向
    };
    this.data.imgListArr.push(picture);
    this.setData({
      imgListArr:this.data.imgListArr
    })
    // console.log(this.data.imgListArr);
  },
  // 删除图片数组
  delPicture(index){
    this.data.imgListArr.splice(index, 1);
    this.setData({
      imgListArr:this.data.imgListArr
    })
    // console.log(this.data.imgListArr);

  },
   
})

添加图片的图标