添加h5下拉刷新的方法和步骤
博客专区 > elanyang 的博客 > 博客详情
添加h5下拉刷新的方法和步骤
elanyang 发表于6个月前
添加h5下拉刷新的方法和步骤
  • 发表于 6个月前
  • 阅读 4
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

导读

bbs社区添加下拉刷新,所需要的开发步骤和注意事项

添加js、css引用

将静态文件复制到项目中并添加引用

<link rel="stylesheet" type="text/css" href="${staticServePath}/js/ht/dropload/dropload.css"></link>

<script src="${staticServePath}/js/ht/dropload/dropload.js"></script>

添加对应元素正确class命名

将所需要用到的class名称添加到标签中,或者将现有标签的class替换到js事件启动脚本中

<div class="article-list list">

    <ul class="lists">

添加事件脚本

<script>

    $(function(){

        var counter = 2;

        // 每页展示4个

        var num = 10;

        var pageStart = 0,pageEnd = 0;

 

        // dropload

        $('.article-list').dropload({

            scrollArea : window,

            loadDownFn : function(me){

                $.ajax({

                    type: 'GET',

                    url: 'getArticle',

                    //dataType: 'json',

                    data: {p:counter},

                    success: function(data){

                        var result = '';

                        counter++;

                        pageEnd = num * counter;

                        pageStart = pageEnd - num;

                        var lists = data.latestArticles;

                        for (var i = 0; i < num; i++) {

                            if(i >= lists.length){

                                // 锁定

                                me.lock();

                                // 无数据

                                me.noData();

                                break;

                            }

                            var article = lists[i];

                            //拼接HTML代码,保存到result

 

                        }

                        // 为了测试,延迟1秒加载

                        setTimeout(function(){

                            $('.lists').append(result);

                            // 每次数据加载完,必须重置

                            me.resetload();

                        },1000);

                    },

                    error: function(xhr, type){

                        alert('Ajax error!');

                        // 即使加载出错,也得重置

                        me.resetload();

                    }

                });

            }

        });

    });

</script>

分页设置

分析自带的分页变量代表什么意义,转换成目前所需的变量值

var counter = 2;

// 每页展示4个

var num = 10;

var pageStart = 0,pageEnd = 0;

……

……

……

var result = '';

counter++;

pageEnd = num * counter;

pageStart = pageEnd - num;

var lists = data.latestArticles;

for (var i = 0; i < num; i++) {

    if(i >= lists.length){

    // 锁定

    me.lock();

    // 无数据

    me.noData();

    break;

    }

    var article = lists[i];

    //拼接HTML代码,保存到result

}

拼接HTML

result += '<li>';

result += ' <div class="fn-flex">'

    //+ ' <a rel="nofollow" class="ft-gray" '

    //+ ' href="/member/' + article.articleAuthorName + '" '

    //+ 'title="' + article.articleAuthorName + '"><div class="avatar" style="background-image:url("' + article.articleAuthorThumbnailURL + '?")"></div></a>'

    '          <div class="fn-flex-1 has-view">'

    '<h2>'

    '<a data-id="' + article.oId + '" data-type="' + article.articleType + '" rel="bookmark"'

    'href="' + article.articlePermalink + '">';

 

if (article.top != 0) {

result += '<span style="font-weight:bold;" class="c_blue">【置顶】';

if (article.articleTitleEmoj.length < 18) {

    if (article.important == 0) {

    result += '<span class="c_orange">【精华】' + article.articleTitleEmoj + '</span>';

    else {

    result += article.articleTitleEmoj;

    }

else {

    if (article.important == 0) {

    result += '<span class="c_orange">【精华】' + article.articleTitleEmoj.substring(0, 17) + '...</span>';

    else {

    result += article.articleTitleEmoj.substring(0, 17);

    }

}

result += '</span>';

else {

if (article.articleTitleEmoj.length < 18) {

    if (article.important == 0) {

    result += '<span class="c_orange">【精华】' + article.articleTitleEmoj + '</span>';

    else {

    result += article.articleTitleEmoj;

    }

else {

    if (article.important == 0) {

    result += '<span class="c_orange">【精华】' + article.articleTitleEmoj.substring(0, 17) + '...</span>';

    else {

    result += article.articleTitleEmoj.substring(0, 19);

    }

}

}

result += '</a>'

    '</h2>'

    '<div class="ft-smaller"><span class="ft-fade">'+article.timeAgo+'</span></div></div>'

    '</div>'

    '<i class="heat" style="width:' + article.articleHeat * 3 + 'px"></i>'

    '</li>';

共有 人打赏支持
粉丝 0
博文 10
码字总数 3613
×
elanyang
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: