基于jquery和knockout.js 写个瀑布流异步加载分页

Posted 2020-08-09

<div class="list-view">
    <ul>
        <li data-bind="foreach:datalst">
            <div class="item border clearfix">
                <div class="face fl">
                    <a target="_blank" data-bind="attr:{‘title‘:userInfo.username}"  href="javascript:void(0)">
                        <img data-bind="attr:{‘src‘:userInfo.myImg}"   class="circle-radius">
                    </a>
                </div>
                <div class="cont">
                    <div class="detail">
                        <div class="info">
                            <a class="nickname" data-bind="text:userInfo.username" href="javascript:void(0)" target="_blank"></a>
                        </div>
                        <div class="time" data-bind="text:ctime"></div>
                        <div class="text" data-bind="html:content">

                        </div>
                    </div>
                    <div class="handle">
                        <ul class="clearfix">
                            <li>
                                <a href="javascript:void(0)"><i class="icon icon-share"></i>分享</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)"><i class="icon icon-review"></i>评论<em>24</em></a>
                            </li>
                            <li>
                                <a href="javascript:void(0)"><i class="icon icon-thumb"></i>赞<em>24</em></a>
                            </li>
                            <li>
                                <a href="javascript:void(0)"><i class="icon icon-coin"></i>打赏</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)"><i class="icon icon-collect"></i>收藏</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <p id="a_load_more" class="text_align" style="background: black;" data-bind="click:ajaxGetCommentByPageNum">
        加载更多
    </p>
</div>

<script>
    $(document).ready(function () {
        var ViewModel = function () {
            var self = this;
            self.pending = 0;//是否正在请求数据，1表示不能发，0表示可以在发请求
            self.current_comment_page = 1;//当前是第几页；
            self.one_page_num = 10;//每页显示的条数
            self.datalst = ko.observableArray();//双向绑定的数据；
            self.page_max=1;//一个有多少页；
            self.ajaxGetCommentByPageNum = function () {
                if(self.page_max <　self.current_comment_page){
                    layer.msg(‘数据加载完成了‘);
                    return false;
                }
                if(self.pending == 1){
                    return false;
                }
                self.pending = 1;
                $.ajax({
                    url: ‘/dksapi/weiboLive/GetSquareLive‘,
                    data:{pagecount:self.one_page_num,pageindex:self.current_comment_page,source:0},
                    type: ‘get‘,
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    dataType: ‘json‘,
                    success: function (json) {
                        if (json.status === ‘success‘) {
                            for(var i in json.data.dataList){
                                self.datalst.push(json.data.dataList[i]);
                            }
                            self.page_max=Math.ceil(json.data.dataMeta.totalcount / self.one_page_num);
                            self.current_comment_page++;
                            setTimeout(function () {
                                self.pending = 0;//请求结束
                            },500)
                        }
                    },
                    error: function () {
                        layer.msg(‘网络错误‘);
                    }
                });
            }
        };
        var currentViewModel = new ViewModel();
        ko.applyBindings(currentViewModel);
    })
</script>