小程序scroll-view橫向布局

我的需求是,用戶需要上傳圖片,上傳了一張圖片后崔拥，上傳框一直在圖片的右邊葱她，并根據(jù)圖片數(shù)量的增多昆箕，逐漸往右端移動。最多可以上傳6張圖片.圖片可以一張張刪除,也可以預(yù)覽,但是布局的時候還是踩了一個scroll-view的坑,接下來就把整個過程稍微講一下
1.沒有圖片的時候,上傳框是一直在中間的,上傳了一張圖片后,上傳框會在圖片,這里我先判斷存放圖片的那個數(shù)組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.上傳圖片就是調(diào)用小程序API了,這里可以去查閱文檔了,而且只能上傳非gif圖,這里我是調(diào)用的另外一個API判斷圖片信息,然后提示用戶只能上傳圖片允許格式為jpg,png,jpeg,能選擇6張,也是判斷數(shù)組里的圖片加上上傳的圖片總數(shù)是不是超過了,就提示只能選擇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標(biāo)簽.存放圖片,右邊是上傳框,scroll-view的寬度是calc布局,max-width: calc(100% - 180rpx);如果想橫向布局的話需要給scroll-view加上white-space: nowrap;屬性,子元素添加display: inline-block;不然就不會橫向滾動(很坑),但是還有一個問題是,安卓手機(jī)上傳超過3張時,圖片就會顯示不見,但是蘋果是好的,,,,這就很無語了,


image.png

然后我開始查文檔,都沒發(fā)現(xiàn)我布局有啥問題.后來無意中發(fā)現(xiàn)我給scroll-view加了一個高度,,,所以圖片就不行了,然后我把高度去掉,給他的父親加.就完美解決,,,耶.....
我的理解是,scroll-view縱向滾動時,必須加高度.橫向滾動時,不能加高度,加寬度就可以.
4.刪除圖片,也是寫一個移除事件,操作數(shù)組,我是拿到點擊的index,然后把index對應(yīng)的圖片移除掉,就可以解決了,.預(yù)覽圖片也是調(diào)的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), //頁面的初始數(shù)據(jù)
  onLoad: function (option) {
    $page = this;
    $query = option;
  },
  onReady: function () { }, //監(jiān)聽頁面初次渲染完成
  onShow: function () {}, //監(jiān)聽頁面顯示
  onHide: function () { }, //監(jiān)聽頁面隱藏
  onUnload: function () { }, //監(jiān)聽頁面卸載
  onPullDownRefresh: function () { }, //頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
  onReachBottom: function () { }, //頁面上拉觸底事件的處理函數(shù)
  onShareAppMessage: function () { },//用戶點擊右上角分享
  chooseImage: function () {
    var that = this;
    let kk = 0;
    if(that.data.imageList.length == that.data.maxCount){
      //圖片已達(dá)上線
      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
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末妥色，一起剝皮案震驚了整個濱河市搪花，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌嘹害，老刑警劉巖撮竿，帶你破解...
    沈念sama閱讀 222,183評論 6贊 516
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異笔呀，居然都是意外死亡幢踏，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門许师，熙熙樓的掌柜王于貴愁眉苦臉地迎上來房蝉，“玉大人，你說我怎么就攤上這事微渠〈罨茫” “怎么了？”我有些...
    開封第一講書人閱讀 168,766評論 0贊 361
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵逞盆，是天一觀的道長檀蹋。 經(jīng)常有香客問我，道長云芦，這世上最難降的妖魔是什么俯逾？ 我笑而不...
    開封第一講書人閱讀 59,854評論 1贊 299
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮焕数，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘刨啸。我一直安慰自己堡赔，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 68,871評論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布设联。 她就那樣靜靜地躺著善已，像睡著了一般。 火紅的嫁衣襯著肌膚如雪离例。 梳的紋絲不亂的頭發(fā)上换团，一...
    開封第一講書人閱讀 52,457評論 1贊 311
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音宫蛆，去河邊找鬼艘包。 笑死的猛，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的想虎。 我是一名探鬼主播卦尊，決...
    沈念sama閱讀 40,999評論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼舌厨！你這毒婦竟也來了岂却？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,914評論 0贊 277
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤裙椭，失蹤者是張志新（化名）和其女友劉穎躏哩，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體揉燃，經(jīng)...
    沈念sama閱讀 46,465評論 1贊 319
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡扫尺，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了你雌。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片器联。...
    茶點故事閱讀 40,675評論 1贊 353
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖婿崭，靈堂內(nèi)的尸體忽然破棺而出拨拓，到底是詐尸還是另有隱情，我是刑警寧澤氓栈，帶...
    沈念sama閱讀 36,354評論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布渣磷，位于F島的核電站，受9級特大地震影響授瘦，放射性物質(zhì)發(fā)生泄漏醋界。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3贊 335
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一提完、第九天 我趴在偏房一處隱蔽的房頂上張望形纺。 院中可真熱鬧，春花似錦徒欣、人聲如沸逐样。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0贊 25
  • 一樁弒父案打肝，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽脂新。三九已至，卻和暖如春粗梭，著一層夾襖步出監(jiān)牢的瞬間争便，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工断医， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留滞乙，地道東北人奏纪。 一個月前我還...
    沈念sama閱讀 49,091評論 3贊 378
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像酷宵，于是被迫代替她去往敵國和親亥贸。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,685評論 2贊 360