sui下拉刷新，无限加载，结合axios请求node API接口+vue写的小demo

最新推荐文章于 2021-06-03 17:55:36 发布

weixin_34419321

最新推荐文章于 2021-06-03 17:55:36 发布

阅读量407

点赞数

文章标签： javascript git ViewUI

原文链接：http://www.cnblogs.com/hs610/p/10832352.html

版权

废话不多说，demo共两个页面，一个首页列表，一个详情页。

由于sui路由机制，两个页面共用一个js处理逻辑，每个页面都有一个独立的id，js里面也是使用这个id来区分页面。

下面附demo地址

1.index.html

首页从node api的接口获取的数据，开发中换成你们的请求接口就好。

首页实现的功能有上拉刷新当前页面，滚动到底部自动加载更多...跳转详情页传参

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <style>
      .topicDetails{
            overflow-x: hidden;
            padding: 1rem;
            box-sizing: border-box;
        }
        .title2{
            color: red;
        }
    </style>
</head>
<body>
    <div class="page-group">
        <div id="Drop-down-refresh" class="page">
            <header class="bar bar-nav">
                    <a class="icon icon-me pull-left open-panel"></a>
                    <h1 class="title">首页</h1>
            </header>
            <!-- content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 -->
            <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom"  data-distance="5" data-ptr-distance="55">
                <!-- 默认的下拉刷新层 -->
                <div class="pull-to-refresh-layer">
                    <div class="preloader"></div>
                    <div class="pull-to-refresh-arrow"></div>
                </div>
                <!-- 下面是正文 -->
                <div class="card-container">
                        <div class="card" v-for="list in lists">
                            <a :href="getTopicsDetails(list.id)" class="external2">
                                <div class="card-header"  v-text="list.title"></div>
                                <div class="card-content">
                                    <div class="card-content-inner" v-text="list.id"></div>
                                </div>
                            </a>
                        </div>      
                </div>
                 <!-- 加载提示符 -->
                <div class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
            </div>

        </div>
    </div>

    <script src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js'></script>
    <script src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js'></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js.js"></script>
    <script>
        const app = new Vue({
            el:"#Drop-down-refresh",
            data:{
                url:'https://cnodejs.org/api/v1',
                lists:[],
                itemsPerLoad:10, //每次加载条数
                pageIndex:1 , //请求页数
            },
            mounted() {
                this.getTopics();
            },
            methods: {
                // 获取主题列表
                getTopics(){
                    let _this = this;
                    if(_this.lists.length <= 0 ) $.showPreloader(); // 显示加载指示器
                    axios.get(_this.url + '/topics', {
                        params: {
                            page:_this.pageIndex,         // 请求页码
                            tab:'good',      //主题分类。目前有 ask share job good
                            limit:_this.itemsPerLoad,       //每页条数
                        }
                    })
                    .then(function (response) {
                        $.hidePreloader();
                        console.log(response);
                        // _this.lists = response.data.data;
                        response.data.data.forEach(list => {
                            _this.lists.push(list)
                        });
                        console.log(_this.lists);
                        
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 获取详情跳转传参
                getTopicsDetails:function(topicsId){
                    return 'details.html?id='+topicsId
                }
                
            }, 
        })
        $.init();   
    </script>

</body>
</html>

2.details.html

详情页只是接受传过来的参数，进行请求。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情</title>
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <style>
        .topicDetails{
            overflow-x: hidden;
            padding: 1rem;
            box-sizing: border-box;
        }
        .title2{
            color: red;
        }
    </style>
</head>
<body>
    <div class="page-group">
        <div class="page" id="details">
            <header class="bar bar-nav">
                <a class="button button-link button-nav pull-left back">
                    <span class="icon icon-left"></span>
                    返回
                </a>
                <h1 class="title">详情</h1>
            </header>
            <div class="content topicDetails">
                <h3 class="title2" v-text="title"></h3>
                <div v-html="topicDetails"></div>
            </div>
        </div>
    </div>
    <script src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js'></script>
    <script src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js'></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js.js"></script>
    <script>

        $.init();   
    </script>
</body>
</html>

3.共用的js，使用pageid来区分页面。在对应的id中写逻辑代码。

let loading = false; // 滚动加载    

$(document).on("pageInit",function(e, pageId, $page){
    if(pageId == "Drop-down-refresh"){
        loading = false;
    }else if(pageId == "details"){
        const app = new Vue({
            el:"#details",
            data:{
                url:'https://cnodejs.org/api/v1',
                paraId:'', // 参数id
                topicDetails:'',
                title:'',
            },
            mounted() {
                this.getUrlPara();
                this.getTopicsDetails();
            },
            methods: {
                getTopicsDetails(){
                    let _this = this;
                    $.showPreloader(); // 显示加载指示器
                    // 模拟加载延迟
                    setTimeout(function(){
                        axios.get(_this.url + '/topic/' + _this.paraId)
                        .then(function(res){
                            console.log(res)
                            _this.topicDetails = res.data.data.content;
                            _this.title = res.data.data.title;
                            $.hidePreloader();// 隐藏加载指示器
                        })
                        .catch(function(error){
                            console.log(error)
                            $.hidePreloader();
                            $.alert("加载失败")
                        })
                    },0)
                   
                },
                // 获取参数id
                getUrlPara(){
                    let _this = this;
                    let url = document.location.toString();
                    let arrUrl = url.split("=");
                    _this.paraId = arrUrl[1];
                    console.log(_this.paraId)
                    return _this.paraId;
                }
            },
        });   
    }
    
});
    // 添加'refresh'监听器  下拉刷新
$(document).on("refresh",".pull-to-refresh-content",function(e){
    //模拟1s的加载过程
    setTimeout(function(){
        // 下拉后执行刷新
        location.reload();
    },1000)
});
    
    // 注册'infinite'事件处理函数 滚动加载
$(document).on('infinite', '.infinite-scroll-bottom',function() {
    // 如果正在加载，则退出
    if (loading) return;
    // 设置flag
     loading = true;
    // 模拟1s的加载过程
    setTimeout(function() {
        app.pageIndex++;
        if(app.lists.length >= 100){
            //加载完毕，则注销无限加载事件，以防不必要的加载
                $.alert("没有更多了...")
                loading = true;
                $.detachInfiniteScroll($('.infinite-scroll'));
            // 删除加载提示符
                $('.infinite-scroll-preloader').remove();
                return;
        }
        app.getTopics();
        console.log("加载完成")
        loading = false;
    },1000);

});