jquery weui 上拉加载，下拉刷新，问题解答。

jquery weui 上拉加载，下拉刷新，以及问题解答。

以下是上拉加载，和下拉刷新的全部代码，直接复制就能使用，记得把api换成项目真实地址，亲测有效，大神勿喷
html

  <div class="container" id="container" style="height:100%; margin-top: -50px;overflow:auto;  z-index: 1  "><!--下拉刷新--><div class="weui-pull-to-refresh__layer" style=" "><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="contentList" id="contentList"><!--内容展示区域--></div><div class="weui-loadmore"><i class="weui-loading"></i><span class="weui-loadmore__tips">正在加载</span></div></div>

这样写的前提确保是html和body的height是100%，也就是屏幕的高度，实际出来的效果底下会缺一块，再加上下面这句代码就没有问题了。

$(function(){$("#container").css("padding-bottom","50px");
})

不能使用高度，高度会有问题，使用padding就行了

  var page = 1;var limit = 10;var loading = false; //状态标记loadComplaints(limit,page);//=========================下拉刷新$("#container").pullToRefresh(function() {page = 1;$("#contentList").html("");loadComplaints(10,1);$("#container").pullToRefreshDone(); // 重置下拉刷新});// $("#container").pullToRefresh().on("pull-to-refresh", function () {// });$("#container").infinite().on("infinite", function () {if (loading) return;loading = true;page++; //页数$('.weui-loadmore').show();loadComplaints(limit,page);});function loadComplaints(limit,page) {$.showLoading();request({type: "GET",url: url,//换上自己的apidata: "",isAsync: true,success: function(res) {$.hideLoading();loading = false;if(res.status) {if(res.data.length > 0 && res.data != null) {creatTemplate(res.data);//这里是将数据遍历并创建dom添加到容器中}else {if(page == 1) {console.log("没有数据");$(".container").hide();$("#noContent").show();}else {var endHtml = '<div class="weui-cells__title textCenter" >没有更多内容了哟~~</div>';$("#contentList").append(endHtml);loading = true;}}}else{$.toptip(res.msg, 'error');var endHtml = '<div class="weui-cells__title textCenter" >没有更多内容了哟~~</div>';$("#contentList").append(endHtml);loading = true;}$(".weui-loadmore").hide();},error: function(err) {$.toptip("发生未知错误", 'error');$.hideLoading();  loading = false;}})}

欢迎小伙伴们评论

jquery weui 上拉加载，下拉刷新，问题解答。相关推荐

php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
ionic上拉加载-下拉刷新
ionic上拉加载-下拉刷新 1.上拉加载 <ion-infinite-scroll on-infinite="loadOlderStories()" distance=&q ...
Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
教你如何使用SwipeRefreshLayout来构建一个上拉加载下拉刷新框架
前言: 基本上所以的移动端应用都有Listview(当然RecyclerView也一样),那必不可少的都会嵌入一个上拉加载下拉刷新的功能.这样能大大的减少用户的流量消耗,同样对于用户也有更好的用户体验 ...
ios 上拉加载下拉刷新
在一款 App应用中有的时候会用到上拉加载下拉刷新的功能,本人觉得SVPullToRefresh很好用(可以用在UIScrollView上,包括UITableview和UICollectionView ...
jquery实现上拉加载下拉刷新
引入dropload插件需要引入的文件 <script src="js/zepto.min.js"></script> <script src=&q ...
微信公众号上拉加载下拉刷新
最近再再做一个公众号的项目有需要用到上拉加载,下拉刷新的技术.在网上找了很久,终于找到一个很好用 js 插件,今天我就把这个插件分享给大家,该包可用于App和微信公众号 , 资源下载地址:https: ...
上拉加载下拉刷新了解下
2019独角兽企业重金招聘Python工程师标准>>> 老样子,我们先,哦不,今天我们直接上思路,没有效果图,真的没有我们依旧从界面及逻辑两块进行分析 1.界面上,只分成简单的两块 ...
vue 实现上拉加载下拉刷新（思路贼清晰）
项目需要用到上拉刷新下拉加载所以自己手动实现了一个组件: <template><div class="my-scroll" :class="[scr ...

jquery weui 上拉加载，下拉刷新，问题解答。

jquery weui 上拉加载，下拉刷新，以及问题解答。

jquery weui 上拉加载，下拉刷新，问题解答。相关推荐

最新文章

热门文章