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

当前功能主要实现:

1、选择相册图片进行显示九宫格显示

2、携带删除按钮

3、可动态设置标签为主标签

说明:当前实现是在uniapp中进行功能实现,但原生小程序其实也大同小异,可以直接拿布局进行

功能实现。

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

当前album为图片的数组,测试时可直接数组添加值方可假数据显示,图片链接网上直接拷贝方可。


            
                
                    
                        
                            
                                
                                
                                    标签
                                
                                
                            
                        
                    
                    
                        
                        ({{album.length}}/9张图)
                    
                    
                
            
.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;
    }
你的鼓励将是我创作的最大动力 你的鼓励将是我创作的最大动力

 

 

 

 

你可能感兴趣的:(uni-app开发,小程序,小程序九宫格)