小程序九宮格圖片及可設置動態標籤操作

當前功能主要實現：

1、選擇相冊圖片進行顯示九宮格顯示

2、攜帶刪除按鈕

3、可動態設置標籤爲主標籤

說明：當前實現是在uniapp中進行功能實現，但原生小程序其實也大同小異，可以直接拿佈局進行

功能實現。

當前album爲圖片的數組，測試時可直接數組添加值方可假數據顯示，圖片鏈接網上直接拷貝方可。

<view class="pb_120">
            <view class="w_100">
                <view class='gridview'>
                    <block v-for="(item,index) in album" :key="index">
                        <view class='gridview-item'>
                            <view @click="showImageDialog" :data-index="index" class="" style="position: relative;">
                                <image class="v-delete-image" :src="item.url+'_small'" mode="aspectFill" />
                                <view v-if="imgUrl == item.url" class="flex_xy_cc color_fff font_size_12 bg_theme" style="width:68upx;height:46upx;border-radius:10upx 0upx 10upx 0upx;position: absolute;
       left: 0rpx;
       right: auto;">
                                    標籤
                                </view>
                                <image :data-index="index" @tap.stop="deleteImage" class="cancelI width_36 height_36" src="../../../../static/ic_delete.png"
                                 mode="" />
                            </view>
                        </view>
                    </block>
                    <view v-if="album.length < 9" class="height_200" style="margin-top: 10upx;width: 230upx;float: left;position: relative;">
                        <image v-if="album.length < 9" style="width: 230upx;height: 200upx;" src="../../../../static/img_add_product_photo.png"
                         mode="aspectFill" @click="upload()" />
                        <view v-if="album.length < 9" class="v-add-photo-txt">({{album.length}}/9張圖)</view>
                    </view>
                    <view class="clear" style="clear: both;" />
                </view>
            </view>

.gridview{
        margin: 5rpx 10rpx 5rpx 20rpx;
    }
    
    .gridview-item{
        width: 230upx;
        height: 200rpx;
        margin-right: 10upx;
        margin-top: 10upx;
        float: left;
        border-radius: 10upx;
    }
    
    .cancelI {
       position: absolute;/* //父元素的position位置固定，這個絕對定位纔會生效 */
       right: 0rpx;/* //位於父元素的右邊 2px */
       left: auto;
    }

    .v-delete-image{
        float: left;
        height: 200upx;
        width: 230upx;
        margin-right:10upx;
        margin-bottom: 10upx; 
        border-radius: 10upx;
    }

你的鼓勵將是我創作的最大動力