zoukankan      html  css  js  c++  java
  • 巧用weui.gallery(),点击图片后预览图片

    要在页面需要加载的JS文件:

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

    可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/

    要先给图片创建一个节点:

    var imgDom = $("<img class='weui-jiaj-img' />");

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

    for(var i = 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地址),弹出图片并预览

    var imgDiv = 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属性出来
        var item = $(this).attr('img-item');
        if(item) item = JSON.parse(item);
        
        var imgUrl = item.imgUrl;
        weui.gallery(imgUrl);
        $('.weui-gallery__del').remove();
        //去掉span中的字符串,要加上这句
        $('.weui-gallery span').html('');
    })
     
  • 相关阅读:
    斜率DP小结
    CF 1059 D Nature Reserve(double 精度问题)
    ZOJ 3747 Attack on Titans(DP+思维)
    BZOJ 1933 Bookcase 书柜的尺寸
    异或的一些性质
    (学习5 分治思想)最短对的问题
    (学习4)二分归并排序
    mac上git与github的联动
    (学习3)二分法与二叉查找树
    (学习2)Floyd和Dijkstra算法
  • 原文地址:https://www.cnblogs.com/baiyygynui/p/6285910.html
Copyright © 2011-2022 走看看