文档章节

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

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

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

达斯雷马 ⋅ 2017/01/14 ⋅ 1

优雅的H5下拉刷新【minirefresh】

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

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

优雅的H5下拉刷新【minirefresh】

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

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

webview中下拉刷新中获取window.innerHeight总是0的解决方案

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

白狼栈 ⋅ 2016/02/23 ⋅ 0

关于bootstrap下拉框组件点击后不自动关闭的处理

我们在使用bootstrap下拉框组件时,有时会有如下需求,比如,下拉框中有分页的需求,如果你点击翻页时那下拉框会自动关闭,再打开下拉框又会重新刷新,这肯定是不满足条件的。所以就会有点击...

道之若无 ⋅ 04/17 ⋅ 0

React Native支持任意组件实现下拉刷新功能,并且可以自定义下拉刷新头部

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

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

Fragment多重嵌套实现电影,影院展示页(有源码提供下载)

公司以前的app是用H5封的,由于一个模块效果用H5实现出来的效果不太理想,所以boss要求用原生的来实现,高(ni)兴(ma)的脑仁疼,先来看一下要实现的效果图: 我的效果图竟然告诉我图片过大,没...

丁先森Promise ⋅ 01/11 ⋅ 0

【Android】RecyclerView下拉刷新与加载更多

知道自己不能做什么远比知道自己能做什么重要。 RecyclerView是Android L版本中新添加的控件,它的灵活性、可替代性、回收机制等比listview更好。可能对于一些使用过RecyclerView的开发者会说...

zrunker ⋅ 2017/10/26 ⋅ 0

十分钟搭建主流框架_下拉/上拉刷新数据(OC)

本节主题(网络部分-下拉/上拉刷新) 源码地址在文章末尾 达成效果 前言 经过十分钟搭建主流框架简单的网络部分(OC)的介绍,相信你已经实现了基本的联网获取数据,但只是粗糙的获取了固定的数...

hejunbinlan ⋅ 2015/11/13 ⋅ 0

Android进阶——框架打造之RecyclerView框架

前言 RecyclerView已经完全替代了ListView的开发,其强大之处在于性能、内存、使用、灵活、丰富的API、动画、事件处理上都可以完美的体现出来,对于开发者来说RecyclerView是必须精通的一关,...

qq_30379689 ⋅ 01/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

R计算IV

参考文章 #读取文件 rawdata = read.csv("/path/to/csv/file",header=T) colnames(rawdata)[18] <- "y" //重命名因变量y #数据分区 训练集测试集 trainIdx <- sample(nrow(rawdata), round(......

火力全開 ⋅ 15分钟前 ⋅ 0

SQL老司机,在SQL中计算 array & map & json数据

摘要: 场景 通常,我们处理数据,一列数据类型要么是字符串,要么是数字,这些都是primitive类型的数据。 场景 通常,我们处理数据,一列数据类型要么是字符串,要么是数字,这些都是primi...

阿里云云栖社区 ⋅ 15分钟前 ⋅ 0

SQL老司机,在SQL中计算 array & map & json数据

摘要: 场景 通常,我们处理数据,一列数据类型要么是字符串,要么是数字,这些都是primitive类型的数据。 场景 通常,我们处理数据,一列数据类型要么是字符串,要么是数字,这些都是primi...

猫耳m ⋅ 26分钟前 ⋅ 0

关于ireport自定义变量类型为list的时候

自己摸石头过河,我真的应该去趟市中心图书馆,借本真正靠谱的教材 网上的东西,只有0.01%是有用的,还有0.99%是垃圾,剩下的99%是垃圾的复制品。。 哎!~ 问题是这样的,报表带sql,从db中获...

炑炑milina ⋅ 26分钟前 ⋅ 0

Spring mvc ContextLoaderListener 原理解析

对于熟悉Spring MVC功能,首先应从web.xml 开始,在web.xml 文件中我们需要配置一个监听器 ContextLoaderListener,如下。 <!-- 加载spring上下文信息,最主要的功能是解析applicationContex...

轨迹_ ⋅ 27分钟前 ⋅ 0

阿里云发布企业数字化及上云外包平台服务:阿里云众包平台

摘要: 阿里云正式发布旗下众包平台业务(网址:https://zhongbao.aliyun.com/),支持包括:网站定制开发,APP、电商系统等软件开发,商标、商品LOGO、VI、产品包装设计、营销推广、大数据人...

阿里云官方博客 ⋅ 29分钟前 ⋅ 0

Redis安装异常解决办法

官网地址:http://redis.io/ 官网下载地址:http://redis.io/download 1. 下载Redis源码(tar.gz),并上传到Linux 2. 解压缩包:tar zxvf redis-2.8.17.tar.gz 3. 进入解压缩后的文件夹:c...

slagga ⋅ 33分钟前 ⋅ 0

006. 深入JVM学习—年轻代

1. 年轻代图片 年轻代(Young)属于JVM堆内存空间的一个组成部分 所有使用关键字new新实例化的对象一定会在伊甸园区进行保存,而对于存活区保存的一定是已经在伊甸园区存在一段时间并且经过了...

影狼 ⋅ 34分钟前 ⋅ 0

如何成为一个合格的程序员

偶尔的,我会被人问道:如何成为一名优秀的程序员,更或者,如何成为一名程序员。每次人们问起,我都力图给出不同的答案。因此,我的答案是各种各样的。下面就是我认为的成为一名优秀的程序员...

柳猫 ⋅ 35分钟前 ⋅ 0

cups error_log日志暴增

日志内容 File \"/usr/lib/cups/notifier/dbus\" has insecure permissions 解决(未验证适用范围) sudo service cups stopsudo rm /etc/cups/subscriptions.conf*sudo rm -r /var/cac......

一介码夫_Hum ⋅ 39分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部