文档章节

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

风清扬2046
 风清扬2046
发布于 2017/05/04 11:31
字数 514
阅读 20
收藏 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>';

© 著作权归作者所有

共有 人打赏支持
风清扬2046
粉丝 0
博文 10
码字总数 3613
作品 0
周庄
架构师
私信 提问
webview中下拉刷新中获取window.innerHeight总是0的解决方案

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

白狼栈
2016/02/23
139
0
你应该知道的2016年有关App开发的技术创新

上一篇简述了2016年有关App产品的年中总结,这篇开始历数有关App开发的技术创新!无论你是创业者,还是程序员,无论你是否懂编程、写代码,利用APICloud平台数据撰写的年中总结,集合了移动应...

duduo丶
2016/07/14
184
0
【2016年终总结中】凝聚365天的移动应用开发技术精华

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

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

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

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

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

撒网要见鱼
2017/09/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 自定义你的空间

通过对你的空间进行界面的自定义能够让你的空间更加出类拔萃。 如果你具有空间管理员权限,你可以修改你空间的颜色配色,添加你自己的空间标识,选择是否在你空间中显示边栏。或者你可以进入...

honeymose
今天
1
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
5
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部