移动端-图片可手滑放大缩小、删除功能

1. html文件加入：

<script src="../js/pinchzoom.js"></script>

 

<div id="buiPhoto" class="bui-upload bui-fluid-space-4">

                            <div class="span1">

                                <div id="btnUpload" class="bui-btn">          //上传图片处

                                    <i class="icon-plus large"></i>

                                </div>

                            </div>

</div>

<main id="beingTest_list">         //图片放大的模板

                <div class="zezhao">

                    <div class="colse">关闭</div>

                    <div class="showImg">

                    </div>

                </div>

 </main>

 

2. js文件 示例  渲染模板为： 

const _PictrueView = function(res){

        let $facePhoto = $("#buiPhoto");

        let $uploadBtn = $("#btnUpload").parent();

        let currentIndex = 0,currentName = "";

        let Data=res.questions[_pro].answer;

        console.log('banging',res)

    

        for(let i=0;i<Data.length;i++){

            let uri = common.settings.downloadAttachmentUrl+"?attachID="+Data[i].attachmentId;

            console.log("====================="+uri)

            currentIndex = i

            currentName = Data[i].name 

            $uploadBtn.before(templatePhoto(uri))    //增加图片dom

           

        }

function templatePhoto(url) {

            return `<div class="span1" data-index="${currentIndex}" data-name="${currentName}">

                    <div class="bui-upload-thumbnail"><img class="imgClass" src="${url}" alt="" /><i class="icon-removefill"></i></div>

                </div>`

        }

//点击查看可放大缩小图片

            $(".imgClass").each(function(){

                $(this).on('click',function(){

                console.log('this.src',$(this).attr("src"));

                $(".zezhao").show();  

                var html = `<img src="${$(this).attr("src")}">`

                $(".showImg").append(html);

                $(".showImg>img").each(function(i) {       //循环遍历showimg下的img

                    new RTP.PinchZoom($(this), {});      //手指滑动可放大缩小图片

                });

                $(".colse").click(function(){

                    $(this).parent().hide();

                    $('.showImg>div.pinch-zoom-container').remove();

                })

                })

            })

//删除相应图片

            $facePhoto.on("click", ".icon-removefill", function(e) {

                let $item = $(this).parent().parent();

                let index = $item.attr("data-index");

                // 删除对应的上传数据

                uiUpload.remove(index);

                // 删除dom显示  uiUpload是用了bui.upload();

                $item.remove();

                e.stopPropagation();

                attachment = resdata.questions[_pro].answer;

                attachment.splice(index,1);

                if(attachment.length < 9){

                    $("#btnUpload").show();

                    if(attachment.length < 1){

                        $(".qIndex").eq(resdata.questions[_pro].orderNo - 1).css({ "background": "white", "color": "rgb(111,135,179)", "border": "1px solid rgb(111,135,179)" });

                    }

                }

            })

}