jQuery WeUI 组件下拉刷新和滚动加载的实现(复制就可以使用)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>滚动加载更多</title><link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css"><link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css"><script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script><script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script></head><body><div class="content" style="background-color: #FFFFFF; width: 100%;height:88%; margin-top:40px;margin-top: 45px;position: absolute; margin-bottom:45px;padding:0px; overflow: hidden;"><div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap" style="height:100%; margin-top: 1px;overflow:auto;  z-index: 1"><!--下拉刷新--><div class="weui-pull-to-refresh__layer" style="padding: 5px;"><div class="weui-pull-to-refresh__arrow"></div><div class="weui-pull-to-refresh__preloader"></div><div class="down">下拉刷新</div><div class="up">释放刷新</div><div class="refresh">正在刷新</div></div><div class="weui-form-preview" id="Tolist"><!--内容展示区域--><h1>6666</h1></div><div class="weui-loadmore" style="padding-bottom:30px;height:20px"><i class="weui-loading"></i><span class="weui-loadmore__tips">正在加载</span></div></div></div><script>var pages = 1;var sizes = 4;var loading = false;  //状态标记$(function () {loadlist();})//=========================下拉刷新$("#listwrap").pullToRefresh().on("pull-to-refresh", function () {setTimeout(function () {pages = 1;$("#Tolist").html("");loadlist();if (loading) loading = false;$("#listwrap").pullToRefreshDone(); // 重置下拉刷新}, 1500);   //模拟延迟});//============================滚动加载$("#listwrap").infinite().on("infinite", function () {if (loading) return;loading = true;pages++; //页数alert("999");$('.weui-loadmore').show();setTimeout(function () {loadlist();loading = false;}, 2500);   //模拟延迟});// =======加载数据loadlist();function loadlist() {var html = "";html += ' <div class="weui-form-preview__bd"> ';html += ' <div class="weui-form-preview__item"> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' <p">' + 6 + '</p> ';html += ' </div> ';html += ' </div> ';$("#Tolist").append(html);loading = true;$(".weui-loadmore").hide();}</script></body></html>

jQuery WeUI 组件下拉刷新和滚动加载的实现(复制就可以使用)相关推荐

（仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录一.点击过的新闻列表文字变灰效果图实现思路导入ormlite数据库类依赖利用ormlite创建数据库和表创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里两个事件 //下拉刷新 o ...
recyclerview的数据刷新（下拉刷新和自动加载更多）以及添加提示语（例如：“数据已加载完毕”）
下拉加载更多的核心是SwipeRefreshLayout搭配Recyclerview进行使用.布局为 <android.support.v4.widget.SwipeRefreshLayout ...
Vue 下拉刷新及无限加载组件 - 有你便是晴天 - 博客园
原文 https://github.com/wangdahoo/vue-scroller 主题 Vue.js Vue Scroller Vue Scroller is a foundational ...
微信小程序实现分页加载，触底加载下一页，滚动加载
这里我就不写wxml了,就是一个列表循环,直接看js代码逻辑,注释都写在代码后面了,这个方法可以实现无限滚动加载,直到加载完最后一条数据,也可以实现触底没数据后,二次触底可以从新加载刷新,学废了就给个 ...
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
JRoll 2 使用文档（史上最强大的下拉刷新，滚动，无限加载插件）
概述说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...
java jsp 页面下拉框 ajax异步加载数库数据
全面详细的新手下拉框数据显示.web项目中难免用到下拉框异步加载数据的情况.这里分享一个.使用的是jquery的ajax异步加载后台数据.后台使用java语言. 1,先看效果,下拉框如下: 2.获取值 ...
select下拉框的动态加载
layui里面的: 查询条件的下拉框: //加载查询条件的下拉框 $.get("/department/loadAllDepartment", function(data) {le ...
android 自动加载下一页,Android PullToRefresh下拉到底部自动加载下一页
有时候我们想要修改pullToRefresh直接拉到底部的是否自动加载下一页的东西这里有个方法可以供大家参考 private void scrollToBottom() { mListView.set ...

jQuery WeUI 组件下拉刷新和滚动加载的实现(复制就可以使用)

jQuery WeUI 组件下拉刷新和滚动加载的实现(复制就可以使用)相关推荐

最新文章

热门文章