文档章节

添加h5下拉刷新的方法和步骤

偶哈哟
 偶哈哟
发布于 2017/05/04 11:31
字数 514
阅读 18
收藏 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
作品 0
周庄
架构师
【2016年终总结中】凝聚365天的移动应用开发技术精华

2016年对于APICloud来说是增长的一年更是收获的一年。这一年里APICloud的产品经历了两次巨大更新和升级为原生开发者带来了全新的产品SuperWebview为传统企业和互联网公司解决App定制难题。A...

达斯雷马
2017/01/14
617
1
优雅的H5下拉刷新【minirefresh】

序 严格的来说,这是我第一个完全投入的开源项目,它的出现是为了统一移动H5中的下拉刷新,想通过一套框架,多主题拓展方式,适应于任意需求下的任意下拉刷新场景。 另外,这个项目作为独立项...

撒网要见鱼
2017/09/02
0
0
优雅的H5下拉刷新【minirefresh】

序 严格的来说,这是我第一个完全投入的开源项目,它的出现是为了统一移动H5中的下拉刷新,想通过一套框架,多主题拓展方式,适应于任意需求下的任意下拉刷新场景。 另外,这个项目作为独立项...

撒网要见鱼
2017/09/02
0
0
webview中下拉刷新中获取window.innerHeight总是0的解决方案

问题描述 用react-native与h5做交互的时候,h5页面下拉刷新显示分页数据的时候,web调试正常,webview里面alert(window.innerHeight)的结果死活是0的问题 解决方案 通过下面的方案获取windo...

白狼栈
2016/02/23
139
0
React Native支持任意组件实现下拉刷新功能,并且可以自定义下拉刷新头部

1.背景   无论是Android还是ios,下拉刷新都是一个很有必要也很重要的功能。那么在RN(以下用RN表示React Native)之中,我们该如何实现下拉刷新功能呢?RN官方提供了一个用于ScrollView,Li...

请叫我百米冲刺
2017/06/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
10
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
15
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
20
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
13
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部