我的需求是,用户需要上传图片,上传了一张图片后，上传框一直在图片的右边，并根据图片数量的增多，逐渐往右端移动。最多可以上传6张图片.图片可以一张张删除,也可以预览,但是布局的时候还是踩了一个scroll-view的坑,接下来就把整个过程稍微讲一下
1.没有图片的时候,上传框是一直在中间的,上传了一张图片后,上传框会在图片,这里我先判断存放图片的那个数组imageList是不是为空,如果为空,上传框居中,否则就加一个active类让盒子不居中

image.png
image.png

.weui-uploader__input-box {
  position: relative;
  width: 169rpx;
  height: 169rpx;
  border: 1rpx solid #eaebeb;
  border-radius: 8rpx;
  background-color: #fff;
  margin: 0 auto 18rpx;
}

.weui-uploader__input-box.active {
   margin: 0 0 18rpx 15rpx;
}

2.上传图片就是调用小程序API了,这里可以去查阅文档了,而且只能上传非gif图,这里我是调用的另外一个API判断图片信息,然后提示用户只能上传图片允许格式为jpg,png,jpeg,能选择6张,也是判断数组里的图片加上上传的图片总数是不是超过了,就提示只能选择6张图片

image.png

wx.chooseImage({
      sourceType: ['camera', 'album'],
      sizeType: ['compressed'],
      count: this.data.count,
      success: function (res) {
        var tempList = res.tempFilePaths;
        for (let i = 0; i < tempList.length;i++){
          wx.getImageInfo({
            src: tempList[i],
            success(res) {
              console.log(res);
              kk++;
              if(res.type == 'gif'){
                tempList.splice(i, 1);
                icom.alert('图片允许格式为jpg,png,jpeg');
              }
              if(kk == tempList.length){
                var currentArr = $page.data.imageList.concat(tempList);
                that.setData({
                  imageList: currentArr,
                  count: $page.data.maxCount - (currentArr.length)
                })
              }
            }
          })
        }
      }
    })

3.布局问题.我是左右两个盒子flex布局.左边是一个盒子包裹scroll-view标签.存放图片,右边是上传框,scroll-view的宽度是calc布局,max-width: calc(100% - 180rpx);如果想横向布局的话需要给scroll-view加上white-space: nowrap;属性,子元素添加display: inline-block;不然就不会横向滚动(很坑),但是还有一个问题是,安卓手机上传超过3张时,图片就会显示不见,但是苹果是好的,,,,这就很无语了,

image.png

然后我开始查文档,都没发现我布局有啥问题.后来无意中发现我给scroll-view加了一个高度,,,所以图片就不行了,然后我把高度去掉,给他的父亲加.就完美解决,,,耶.....
我的理解是,scroll-view纵向滚动时,必须加高度.横向滚动时,不能加高度,加宽度就可以.
4.删除图片,也是写一个移除事件,操作数组,我是拿到点击的index,然后把index对应的图片移除掉,就可以解决了,.预览图片也是调的API,查文档啦

4bc24984-840d-41a8-9fab-2bc375b1d737.jpg image.png

以下是完整版本布局,有更好的解决方法,可以评论哦,记得点赞啦,谢谢

微信图片_20190429132613.gif
1.gif

html

<!-- 上传图片 -->
<view class="weui-uploader">
    <view class="weui-uploader__hd">
      <view></view>
      <view class="weui-uploader__info">{{imageList.length}}/{{maxCount}}</view>
    </view>
    <view class="weui-uploader__bd">
      <view class="weui-uploader__files {{imageList.length>=maxCount ? 'active' : ''}}" wx-if="{{imageList.length>0}}">
        <scroll-view class="scroll-view_w" scroll-x="true" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
          <block wx:for="{{imageList}}" wx:for-item="image" wx:key="mark">
            <view class="weui-uploader__file">
              <image class="weui-uploader__img" src="{{image}}" mode='aspectFill'></image>
              <view class='clean' bindtap='cleanpic' data-index="{{index}}"></view>
              <view class='previewImage' data-src="{{image}}" bindtap="previewImage"></view>
            </view>
          </block>
        </scroll-view>
      </view>
      <view class="weui-uploader__input-box {{imageList.length>0 ? 'active' : ''}}">
        <view class="weui-uploader__input" bindtap="chooseImage"></view>
      </view>
    </view>
</view>

css

.weui-uploader__hd {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18rpx;
}
.weui-uploader__info {
  color: #b2b2b2;
  font-size: 24rpx;
}
.weui-uploader__bd {
  overflow: hidden;
  margin-bottom: -8rpx;
  /* margin-right: -18rpx; */
  width: 100%;
  box-sizing: border-box;
  display: flex;
}
.weui-uploader__files {
  /* overflow: hidden; */
  max-width: calc(100% - 180rpx);
  height: 169rpx;
  margin-bottom: 18rpx;
  box-sizing: border-box;
}
.scroll-view_w {
  width:100%;
  white-space: nowrap;
  text-align: right;
}
.weui-uploader__file {
  display: inline-block;
  max-width: 169rpx;
  min-width: 169rpx;
  width: 169rpx;
  height: 169rpx;
  border: 1rpx solid #eaebeb;
  border-radius: 8rpx;
  margin-right: 18rpx;
  position: relative;
}
.weui-uploader__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.weui-uploader__input-box {
  position: relative;
  width: 169rpx;
  height: 169rpx;
  border: 1rpx solid #eaebeb;
  border-radius: 8rpx;
  background-color: #fff;
  /* float: right; */
  margin: 0 auto 18rpx;
}

.weui-uploader__input-box.active {
   margin: 0 0 18rpx 15rpx;
}

.weui-uploader__input-box:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 54rpx;
  height: 41rpx;
  background-image: url(https://clarins.beats-digital.com/wxapp/images/grassSharing/icon_camera.png?sign=c59d2f414254389e53a98b7fe83baeaf&t=15506442951);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: padding-box;
  background-clip: padding-box;
}

.weui-uploader__input-box:active {
  border-color: #d9d9d9;
}

.weui-uploader__input-box:active:before {
  opacity: 0.8;
}

.weui-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.previewImage{
  width: 100%;
  height: calc(100% - 30rpx);
  position: absolute;
  top: 30rpx;
  left: 0;
}
.clean {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(238, 238, 238, 0.3);
  transform: rotate(45deg);
  border-radius: 50%;
}
.clean::after, .clean::before {
  content: '';
  position: absolute;
  background-color: red;
  transform-origin: top;
}
.clean::after {
  width: 30rpx;
  height: 4rpx;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
.clean::before {
  width: 4rpx;
  height: 30rpx;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

js

let PageData = {
  imageList: [],
  maxCount:6,
  count: 6,
};

Page({
  data: Object.assign({}, PageData), //页面的初始数据
  onLoad: function (option) {
    $page = this;
    $query = option;
  },
  onReady: function () { }, //监听页面初次渲染完成
  onShow: function () {}, //监听页面显示
  onHide: function () { }, //监听页面隐藏
  onUnload: function () { }, //监听页面卸载
  onPullDownRefresh: function () { }, //页面相关事件处理函数--监听用户下拉动作
  onReachBottom: function () { }, //页面上拉触底事件的处理函数
  onShareAppMessage: function () { },//用户点击右上角分享
  chooseImage: function () {
    var that = this;
    let kk = 0;
    if(that.data.imageList.length == that.data.maxCount){
      //图片已达上线
      wx.showModal({
        content: '你最多只能选择' + that.data.maxCount+'张照片',
        confirmText: '我知道了',
        showCancel: false,
        success(res) {
          if (res.confirm) {
            console.log('用户点击我知道了')
          } else if (res.cancel) {
          
          }
        }
      })
      return
    }
    wx.chooseImage({
      sourceType: ['camera', 'album'],
      sizeType: ['compressed'],
      count: this.data.count,
      success: function (res) {
        var tempList = res.tempFilePaths;
        for (let i = 0; i < tempList.length;i++){
          wx.getImageInfo({
            src: tempList[i],
            success(res) {
              console.log(res);
              kk++;
              if(res.type == 'gif'){
                tempList.splice(i, 1);
                icom.alert('图片允许格式为jpg,png,jpeg');
              }
              if(kk == tempList.length){
                var currentArr = $page.data.imageList.concat(tempList);
                that.setData({
                  imageList: currentArr,
                  count: $page.data.maxCount - (currentArr.length)
                })
              }
            }
          })
        }
      }
    })
  },
  previewImage: function (e) {
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: this.data.imageList
    })
  },
  cleanpic: function (e) { 
    //点击清除按钮
    var index = parseInt(e.target.dataset.index);
    $page.data.imageList.splice(index, 1);
    $page.setData({
      imageList: $page.data.imageList,
      count: $page.data.maxCount - ($page.data.imageList.length)
    })
  },
}) //end page