移动端相册集实例（包括滑屏，自定义滚动条，上拉加载，大图预览）

本是古典何须时尚 2022-05-23 12:27 136阅读 0赞

大致功能描述：

1、滑屏，添加自定义滚动条

2、上拉加载

3、大图预览

图片预览（左边是为加载中的相册集，中间一个是加载完成的相册，一个是当我们拉到底部的时候会有加载更多的提示，右侧是大图预览的图片，不确定能不能上传成功，之前不能，试一试喽）

![加载中的相册集][20180608182810543]![加载完成的相册集][201806081828473]![加载更多][20180608183148391]![大图预览][2018060818261241]

实现过程，我在代码中注释了，个人认为注释还是很详细的，如果有什么疑问，欢迎留言提问哦！

嗯，然后直接上代码喽！

注意：在使用前，还是先要引入我之前封装好的函数，链接：[MTween][]、[mScroll][]、[setGesture][],引入的时候，MTeen一定要放在前面哦！

css代码没有提供，如果有需要的可以留言

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=no"/>
        <title>图片上滑加载图片</title>
        <link rel="stylesheet" href="loadingPig.css"/>
        <script type="text/javascript">
            (function(){
                //移动端的适配，根据屏幕大小的变化而不断的变化
                setRem();
                window.addEventListener('orientation' in window?"deviceorientation":"resize",setRem);
                function setRem(){
                    var html = document.documentElement;
                    var width = html.clientWidth;
                    html.style.fontSize = width/16+'px';
                }
            })()
    
            document.addEventListener('touchstart', function(e) {
                e.preventDefault();
            });
    
        </script>
    </head>
    <body>
    <header>
        萌萌哒相册集
    </header>
    <div id="box">
        <div id="inner">
            <header>下拉刷新</header>
            <ul id="list">
            </ul>
            <footer>加载更多</footer>
        </div>
    </div>
    <section id="imgPage">
        <header>大图预览
            <a id="backBtn" href="#">
                >
            </a>
        </header>
        <div class="imgWrap">
            <img src="pics/1.jpg" id="bigImg" />
            <nav id="imgNavs">
                <a href="javascript:;">向左旋转90</a>
                <a href="javascript:;">向右旋转90</a>
                <a href="javascript:;">放大</a>
                <a href="javascript:;">缩小</a>
            </nav>
        </div>
    </section>
    <script src="js/m.Tween.js"></script>
    <script src="js/myScroll.js"></script>
    <script src="js/setGesture.js"></script>
    <script>
        (function(){
            var box = document.querySelector("#box");
            var inner = document.querySelector("#inner");
            var footer = document.querySelector("footer");
            var oList = document.querySelector("#list");
            var lis = oList.children;
            var dataImg = [];
            var length = 12;//每次加载12条数据
            var start = 0;
            var isEnd = false;
            for(var i=0; i<52; i++){//生成的数据，在实际工作中，应该从后端获取该部分
                dataImg.push(`pics/${i%26+1}.jpg`);
            }
            setBigImg();
            setScroll();
            createLi();
            //请求数据，加载li
            function createLi(){
                if(start >= dataImg.length){
                    //alert("对不起没有更多图片了");
                    footer.innerHTML = "对不起没有更多图片了";
                    setTimeout(function(){
                        footer.style.opacity = 0;
                        MTween({
                            el:inner,
                            target:{
                                translateY:box.clientHeight -inner.offsetHeight
                            },
                            time:300,
                            type:"easeBoth"
                        });
                    },1000);
                    return;
                }
                var end = start+length;
                end = (end>=dataImg.length)?dataImg.length:end;//判断数据是否加载完毕
                for(var i=start; i<end; i++){
                    var li = document.createElement('li');
                    li.src = dataImg[i];//为li添加自定义属性src，保存对应的图片地址
                    li.isLoad = true;
                    //手指点击图片的时候可以进入大图预览
                    li.addEventListener("touchstart",function(e){
                        this.isMove = false;//为li添加自定义属性isMove,是为了判断我们是要进入大图预览还是在滑屏
                        // 防止我们在滑屏的时候误触图片而进入大图预览，影响用户体验
                    });
                    li.addEventListener("touchmove",function(e){
                        this.isMove = true;//如果手指抬起前，手指进行了move，说明我们是在滑屏，而不是想要进入大图预览
                    });
                    li.addEventListener("touchend",function(e){
                       if(this.isMove){
                           return;//如果我们是在滑屏，那么手指抬起的时候，就不进入大图预览，否则执行下面的代码（进入大图预览）
                       }
                       css(bigImg,"scale",100);
                       css(bigImg,"rotate",0);
                       bigImg.src = this.children[0].src;//让大图的图片和我们点击的li里面的图片保持一致
                       css(imgPage,"scale",100);
                    });
    
                    oList.appendChild(li);
                }
                createImg();
                footer.style.opacity = 0;
            }
            //判断是否该创建img
            function createImg(){
               var boxRect = box.getBoundingClientRect();
               var bottom = boxRect.top+boxRect.height;
               for(var i=start; i<lis.length; i++){
                   var top = lis[i].getBoundingClientRect().top;//li距离视窗的top值
                   if(top<bottom&&lis[i].isLoad){//如果li的top值小于视窗的大小的时候，说明该li进入了可视区
                       lis[i].isLoad = false;//让添加的自定义属性isLoad变为false，是为了防止因为li在可视区，
                       // 而不断的为其添加图片（限制只为每个li添加一张图片）
                       showImg(lis[i]);
                   }
               }
            }
            //创建图片并显示
            function showImg(li){
                var img = new Image();
                img.src = li.src;
                img.onload = function(){
                    li.appendChild(img);
                    //元素没有渲染完成，transition不起作用
                    setTimeout(function(){//等待图片渲染完成之后，再让其透明度为1，这时候我们添加的transition才能起作用
                        img.style.opacity = 1;
                    },100);
                }
            }
    
            function setScroll(){
                mScroll({
                    el:box,
                    start:function(){
                        //手指按下时要执行的函数
                        var innerTop = Math.round(css(inner,"translateY"))-5;//结果为负值（-5是为了扩大条件，可以是你自己认为合适的数）
                        var minTop = box.clientHeight - inner.offsetHeight;//结果为负值
                        if(minTop>=innerTop){//说明用户是在底部进行拖拽的
                            footer.style.opacity = 1;
                            isEnd = true;
                        }else{
                            footer.style.opacity = 0;
                            isEnd = false;
                        }
                    },
                    move:function(){
                        createImg();//发生滚动的时候执行的函数,判断是否创建图片
                    },
                    end:function(){
                        //手指抬起时执行的函数
                        var innerTop = Math.round(css(inner,"translateY"))-5;//结果为负值（-5是为了扩大条件，可以是你自己认为合适的数）
                        var minTop = box.clientHeight - inner.offsetHeight;//结果为负值
                        if(isEnd&&minTop>=innerTop){//两个判断，第一个判断是否是在底部进行的滑屏操作，第二个判断是上拉还是下滑（上拉才执行下面的操作）
                            clearInterval(inner.timer);//清除定时器，阻止滑屏中的回弹动画
                            //如果有数据的话继续创建li
                            start += length;
                            createLi();
                            document.querySelector('#scrollBar').style.opacity = 0;
                            isEnd = false;
                        }
                    },
                    over:function(){}
                });
            }
    
        })()
    //下面是为大图预览添加动画效果
        function setBigImg(){
            var imgPage = document.querySelector("#imgPage");
            var bigImg = document.querySelector("#bigImg");
            var navs = document.querySelectorAll("#imgNavs a");
            var backBtn = document.querySelector("#backBtn");
            backBtn.addEventListener('touchend',function(e){
                css(imgPage,"scale",0);//当点击返回按钮的时候，让大图预览页缩小为0，其实就是返回啦
            });
            var startRotate = 0;
            var startScale = 0;
            var maxScale = 1.5;//限制最大的缩放倍数
            var minScale = 0.5;//限制最小的缩放倍数
            css(imgPage,"scale",0);
            setGesture({//添加多手指操作，实现放大缩小以及旋转操作
                el:bigImg,
                start:function(e){
                    startRotate = css(this,"rotate");
                    startScale = css(this,"scale")/100;
                },
                change:function(e){
                    var scale = startScale*e.scale;
                    if(scale>maxScale){
                        scale = maxScale;
                    }else if(scale<minScale){
                        scale = minScale;
                    }
                    css(this,"rotate",startRotate+e.rotation);
                    css(this,"scale",scale*100);
                },
                end:function(){
                    var deg = css(this,"rotate");
                    deg = Math.round(deg/90);//当我们旋转图片的时候，如果没有旋转到90deg的倍数时，
                    // 我们对其进行处理让其旋转到理他最近的90deg的倍数的位置上，用户体验会更好吧（下面的同理）
                    deg = deg*90;
                    MTween({
                        el:this,
                        target:{rotate:deg},
                        time:300,
                        type:"easeBoth"
                    });
                }
    
    
            });
            //我们点击列表时，可以实现的操作
            navs[0].addEventListener("touchend",function(){
                var deg = css(bigImg,"rotate");
                deg = Math.round(deg/90)-1;
                deg = deg*90;
                MTween({
                    el:bigImg,
                    target:{rotate:deg},
                    time:300,
                    type:"easeBoth"
                });
            });
            navs[1].addEventListener("touchend",function(){
                var deg = css(bigImg,"rotate");
                deg = Math.round(deg/90)+1;
                deg = deg*90;
                MTween({
                    el:bigImg,
                    target:{rotate:deg},
                    time:300,
                    type:"easeBoth"
                });
            });
            navs[2].addEventListener("touchend",function(){
                var scale = css(bigImg,"scale")/100;
                scale+=.1;
                if(scale>maxScale){
                    scale = maxScale;
                }
                MTween({
                    el:bigImg,
                    target:{
                        scale:scale*100
                    },
                    time:300,
                    type:"easeBoth"
                });
            });
            navs[3].addEventListener("touchend",function(){
                var scale = css(bigImg,"scale")/100;
                scale-=.1;
                if(scale<minScale){
                    scale = minScale;
                }
                MTween({
                    el:bigImg,
                    target:{
                        scale:scale*100
                    },
                    time:300,
                    type:"easeBoth"
                });
            });
    
    
        }
    </script>
    </body>
    </html>

ok，完毕，还是那句话，大家有什么好的想法或者有什么问题都可以随时留言，互相学习，互相进步

[20180608182810543]: https://img-blog.csdn.net/20180608182810543
[201806081828473]: https://img-blog.csdn.net/201806081828473
[20180608183148391]: https://img-blog.csdn.net/20180608183148391
[2018060818261241]: /images/20220523/5923e2436c524311ae16dac352998608.png
[MTween]: https://blog.csdn.net/lhjuejiang/article/details/80538044
[mScroll]: https://blog.csdn.net/lhjuejiang/article/details/80560174
[setGesture]: https://blog.csdn.net/lhjuejiang/article/details/80587017