移动端-图片可手滑放大缩小、删除功能
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)" });
}
}
})
}