您的位置：首页 > 产品设计 > UI/UE

巧用weui.gallery()，点击图片后预览图片

2017-01-14 18:37 393 查看
要在页面需要加载的JS文件：

<scriptsrc="../js/libs/weui.min.js"></script>


可以去weui的文档中下载，这是它的demo:https://weui.io/weui.js/
要先给图片创建一个节点：

varimgDom=$("<imgclass='weui-jiaj-img'/>");


因为接口中取到的图片会是很多，因此，在循环图片数据的时候，要给每个图片添加一个动态的class

for(vari=0;i<data.length;i++){
imgDom.addClass('img-'+i);
.....
}


给每个节点的src属性添加获致到的img地址

imgDom.attr('src',problem_img);


最后把这个节点添加到页面的某个div下面

seePanel.find('.answer-img').append(imgDom);


点击图片时，需要先找到这个图片的节点，使用weui.gallery(img地址)，弹出图片并预览

varimgDiv=seePanel.find('.answer-img');
imgDiv.find('.img-'+i).on('click',function(){
weui.gallery(problem_img);
$('.weui-gallery__del').remove();
})






如果你认为此时，预览图片OK的话，就太早了，

weui.gallery(imgUrl);

weui.gallery()方法在预览图片时，会把当前imgUrl地址写入span内部，必须要清除span内部的这个url才算完。
最后应该要加上这句：


//点击图片预览这是我写的，这个不要动
$('.js_container').on('click','.weui-jiaj-doctor-img',function(){
//取item属性出来
varitem=$(this).attr('img-item');
if(item)item=JSON.parse(item);

varimgUrl=item.imgUrl;
weui.gallery(imgUrl);
$('.weui-gallery__del').remove();
//去掉span中的字符串，要加上这句
$('.weui-galleryspan').html('');
})



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航