小程序九宫格图片及可设置动态标签操作

当前功能主要实现：

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;
    }

你的鼓励将是我创作的最大动力