手机web实现上拉加载更多,求完整代码,或者哪位兄台能够帮我提供一个demo

恳请:

1. 标注哪里写数据请求,哪里写判断高度,看了一些人家写的小段代码,我思路还是很混乱

2.我目前只写到加载列表,图片文字,有按页码写的api接口,不会分页和滑动加载(代码附图)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="node_modules/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                font-size: 62.5%;
            }
            #app ul{
                list-style: none;
                padding: 0 2rem;
            }
            #app ul li{
                display: block;
                height: 5rem;
                padding: 2rem 0;
                border-bottom: 0.1rem solid #eee;
                overflow: hidden;
            }
            #app ul li img{
                float: left;
                width: 8rem; 
                height: 5rem;
                margin-right: 2rem;
            }
            #app ul li .title{
                font-size: 1.2rem;
            }
            #app ul li .time{
                font-size: 1rem;
            }
        </style>

    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="item in items" >
                    <img :src="item.url">
                    <p class="title">{{ item.createdAt}}</p>
                    <p class="time">{{ item.publishedAt }}</p>
                </li>                           
            </ul>
        </div>
        <script type="text/javascript">             
            $.ajax({
                url:'https://www.apiopen.top/meituApi?page=4',
                type:'GET',
                dataType:'json',
                success:function(data, status){
                    var pictures = data['data']
                    console.log(pictures[0]['url'])
                    new Vue({
                        el:'#app',
                        data:{
                            items:pictures,
                        },
                    })
                },
                async:true
            })          
        </script>   
    </body>
</html>

图片说明

1个回答

无非都是根据scroll进行判断的,比如超过预定的scroll值,append一个loading的dom,就可以了,网上有很多ui框架,可以直接使用,具体的你也可以查看gitHub源码
这里给你列举两个:
mint-ui
iscroll--结合jquery

weixin_44681697
Bug Terminator 谢谢
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐