小程序scroll-view横向布局

我的需求是,用户需要上传图片,上传了一张图片后，上传框一直在图片的右边，并根据图片数量的增多，逐渐往右端移动。最多可以上传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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,802评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,109评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,683评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,458评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,452评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,505评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,901评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,550评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,763评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,330评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,898评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2赞 342