https://gitee.com/httpchc320321/weUI.git
源碼地址

gif效果圖，加載需要一丟丟時間

功能介紹
1.點擊+框,選擇并展示所選圖片
2點擊×刪除對應圖片
3.右上角0/9看到?jīng)],最多選擇9張
4.點擊圖片放大預覽,并可左右滑動切換

介紹完畢,下面

開始表演.jpg

先來介紹一下各項數(shù)據(jù)

Page({
    data: {
          uploaderList: [],
          uploaderNum:0,
          showUpload:true
    }
})

uploaderList:已選擇的圖片臨時路徑數(shù)組

uploaderNum:已選擇圖片個數(shù)

showUpload:用來判斷是否可繼續(xù)選擇圖片,當傳至9張時不可繼續(xù)上傳

界面布局

<!-- 容器 -->
<view class='ui_uploader_cell'>
    <!-- 根據(jù)已選擇的圖片臨時路徑數(shù)組展示圖片-->
    <view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="{{index}}">
        <!-- 刪除-->
        <icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="red"/>
        <!-- 圖片-->
        <image bindtap='showImg' data-index="{{index}}" src='{{item}}'></image>
    </view>
    <!-- 上傳按鈕+框 -->
    <view class='ui_uploader' bindtap='upload' wx:if="{{showUpload}}"></view>
</view>

根據(jù)已選擇的圖片臨時路徑數(shù)組展示圖片wx:for="{{uploaderList}}"
刪除icon上掛載data數(shù)據(jù)用來刪除指定圖片data-index="{{index}}"
圖片上掛載data數(shù)據(jù)用來點擊放大展示圖片data-index="{{index}}"
根據(jù)已選圖片個數(shù)判斷是否可繼續(xù)上傳wx:if="{{showUpload}}"

邏輯處理

//index.js
//獲取應用實例
const app = getApp()
Page({
    data: {
        uploaderList: [],
        uploaderNum:0,
        showUpload:true
    },
    // 刪除圖片
    clearImg:function(e){
        var nowList = [];//新數(shù)據(jù)
        var uploaderList = this.data.uploaderList;//原數(shù)據(jù)
        
        for (let i = 0; i < uploaderList.length;i++){
            if (i == e.currentTarget.dataset.index){
                continue;
            }else{
                nowList.push(uploaderList[i])
            }
        }
        this.setData({
            uploaderNum: this.data.uploaderNum - 1,
            uploaderList: nowList,
            showUpload: true
        })
    },
    //展示圖片
    showImg:function(e){
        var that=this;
        wx.previewImage({
            urls: that.data.uploaderList,
            current: that.data.uploaderList[e.currentTarget.dataset.index]
        })
    },
    //上傳圖片
    upload: function(e) {
        var that = this;
        wx.chooseImage({
            count: 9 - that.data.uploaderNum, // 默認9
            sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
            sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
            success: function(res) {
                console.log(res)
                // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
                let tempFilePaths = res.tempFilePaths;
                let uploaderList = that.data.uploaderList.concat(tempFilePaths);
                if (uploaderList.length==9){
                    that.setData({
                        showUpload:false
                    })
                }
                that.setData({
                    uploaderList: uploaderList,
                    uploaderNum: uploaderList.length,
                })
            }
        })
    },
    onLoad: function() {}
})

偷了個懶,不想代碼一一講解,寫了簡單注釋,有好的建議或者不懂的地方歡迎留言哦~~~

那么,有緣再見

分手吧.jpg