使用vue做移动端瀑布流分页
讲到瀑布流分页有一个方法一定是要用到的 pullToRefresh(),或者说还有一种代码量比较少,但是看起来不怎么高端的
这个也没什么好解释的,想了解的可以去百度一下
下面上代码
<div id="main" class="content"
style="background-color: #FFFFFF; width: 100%;height:100%;position: absolute;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" hidden id="downRefresh">
<div class="weui-pull-to-refresh__arrow"></div>
<div class="weui-pull-to-refresh__preloader"></div>
</div>
<div class="weui-form-preview" id="Tolist">
<!--内容展示区域-->
<div id="app" v-cloak>
<!--状态栏-->
<div class="nav" >
<a href="${ctx}/mobile/activity/home.jsp">
<button><img src="${ctx}/mobile/activity/img/Arrow.png"/></button>
</a>
<span>活动列表</span>
<div> </div>
</div>
<button class="See popup-opu" style="border: 0px;"></button>
<a :href="toActivityDetail(item.activityEntity.recno)" v-for="(item,index) in edRecomList">
<div class="Result">
<div class="shop-img">
<img v-bind:src="getImages(item.activityEntity.themeImage)"/>
</div>
<div class="describe">
<div class="Price">
<span class="Trade-name">{{item.activityEntity.name}}</span>
<div class="fuzhu">
<div class="Price-address">
<div></div>
<span>{{item.activityEntity.address}}</span>
</div>
</div>
<span class="Number">
<span> {{item.activityEntity.count}}人参加</span>
</span>
<span class="price-time">{{formatDate(item.activityEntity.begdate)}}~{{formatDate(item.activityEntity.enddate)}}</span>
</div>
</div>
<li class="Dividing"></li>
<div :class="getClass(item.activityEntity.state)">{{['','发布','进行','暂停','结束'][item.activityEntity.state]}}</div>
</div>
</a>
<!-- <a @click="queryDate()" v-show="more"
class="weui-btn weui-btn_disabled weui-btn_default" style="margin-bottom: 60px;">加载更多</a> -->
<%--滚动--%>
<div id="scrollItem" style="height: 1px"></div>
</div>
</div>
<div id="bottomRefresh" class="weui-loadmore" style="margin-bottom: 64px">
<div id="bottomRefreshTip" style="text-align: center">
数据已全部加载
</div>
<div id="bottomRefreshContent" style="visibility: hidden">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
</div>
</div>
<a style="display:none" href="javascript:;" id="btn" title="回到顶部"></a>
</div>
接下来就是js代码
var bottomRefreshContent = $("#bottomRefreshContent");
var listWarp = $("#listwrap");
var bottomRefreshTip = $("#bottomRefreshTip");
var downRefresh = $("#downRefresh");
listWarp.pullToRefresh().on("pull-to-refresh", function () {
downRefresh.show();
vm.queryDate(function (data) {
downRefresh.hide();
listWarp.pullToRefreshDone(); // 重置下拉刷新
//重置数据为第一页
vm.edRecomList = data.result.rows
});
// }, 1000); });
var loading = false; //状态标记
listWarp.infinite(80).on("infinite", function () {
if (loading) return;
loading = true;
bottomRefreshContent.css("visibility", "visible");
bottomRefreshTip.css("visibility", "hidden");
vm.initPage.page = vm.initPage.page+1;
vm.param.page = vm.initPage;
// setTimeout(function () {
vm.queryDate(function () {
loading = false;
});
// }, 1000);
});
var vm = new Vue({
el: '#app',
data: {
edRecomList:[]
,more: false
,type:""
,initPage: {
page: 1,
pageSize: 8
}
,param: {}
,total:0
},
methods: {
queryDate: function(callFun){
var that = this;
//查询类型
this.param.type = this.type
$.post("${ctx}/mobile/activity/selectEdRecommendList.do",{"param":JSON.stringify(this.param)} ,function (data) {
if(data.state == 200){
if (data.result.rows.length > 0) {
that.edRecomList = that.edRecomList.concat(data.result.rows);
if (data.result.rows.length < that.initPage.pageSize) {
//隐藏加载中提示
bottomRefreshContent.css("visibility", "hidden");
bottomRefreshTip.css("visibility", "visible");
} else {
//隐藏数据全部完成提示
bottomRefreshContent.css("visibility", "visible");
bottomRefreshTip.css("visibility", "hidden");
}
if (callFun) {
callFun(data)
}
}else{
//隐藏加载中提示
bottomRefreshContent.css("visibility", "hidden");
bottomRefreshTip.css("visibility", "visible");
}
}
} ,'json');
}, },
mounted: function () {
this.param.page = this.initPage;
this.queryDate();
} })
方法二
$(window).on("resize scroll", function () {
var windowHeight = $(window).height();//当前窗口的高度
var scrollTop = $(window).scrollTop();//当前滚动条从上往下滚动的距离
var docHeight = $(document).height(); //当前文档的高度
// console.log(scrollTop, windowHeight, docHeight);
//当 滚动条距底部的距离 + 滚动条滚动的距离 >= 文档的高度 - 窗口的高度
//换句话说:(滚动条滚动的距离 + 窗口的高度 = 文档的高度) 这个是基本的公式
if (scrollTop + windowHeight >= docHeight) {
//vm.nextActivityPage();
vm.getSelectData(4);
//这里是执行的方法,在编写过程中,可能会遇到一个问题,就是数据会无故累加,
//这里需要判断一下当前查询的数据是否是最后一页数据,如果是,就不再执行下一次分页
}
});
使用vue做移动端瀑布流分页的更多相关文章
- .Net/C#分库分表高性能O(1)瀑布流分页
.Net/C#分库分表高性能O(1)瀑布流分页 框架介绍 依照惯例首先介绍本期主角:ShardingCore 一款ef-core下高性能.轻量级针对分表分库读写分离的解决方案,具有零依赖.零学习成本. ...
- 分享一个Vue实现图片水平瀑布流的插件
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.需求来源 今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我突然想起我很久以前写的一篇文章<JS两 ...
- 前端-PC端瀑布流【10张图】
.HTML 利用封装的 jquerywaterfall.js 方法 完成 <!DOCTYPE html> <html lang="en"> <head ...
- vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
- 炫酷的jquery瀑布流
最近做了一个瀑布流效果,思路很简单 首先计算屏幕一行可以放多少个图片,然后在第二行开始,计算每一列的高度并取出最小值,将新图片加载在最小列高度下,如此循环,并且设定一个条件,当滑动到一定距离后,开始重 ...
- vue.js移动端配置flexible.js
前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流(转)
一.Masonry 是基于Jquery插件,用于对CSS布局的可移动层进行重新布局.Masonry愿意石工,可以这样形象的理解,页面上很多大小不一的移动层可以想象成散乱的石头,经过Masonry这个石 ...
- vue.js实现瀑布流之vue-waterfall-easy
想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上 ...
随机推荐
- Docker管理应用数据
1. Manage data in Docker 默认情况下,所有在容器内部创建的文件被存储在一个可写的容器层.这就意味着: 当容器不存在的时候,数据不能被持久化,而且在容器外部想要读取这些数据十分 ...
- JavaWeb学习——获取类路径下的资源
对于JavaWeb而言,获取类路径下的资源,就是获取classes目录下的资源. 获取资源的方式有两种,利用Class或ClassLoader. Class类的getResourceAsStream( ...
- MYSQL5.7版本解决sql_mode=only_full_group_by问题
在安装有些二开框架时会遇到下面的问题,在填写完数据库密码之后他会提示你请在mysql配置文件中修改ql-mode去掉ONLY_FULL_GROUP_BY,但是我们去mysql的配置文件中查找此配置,有 ...
- Unresolved function or method require()
1. 这是在JavaScript配置中没有node.js,去设置中配置就行了,方法如下: setting -> Languages&Frameworks -> Javascript ...
- HDU3415【单调队列】
单调队列解决通过维护满足条件内的值,并保证队列里的值单调,解决一个最大最小. 让你求一个k区间长度的最大值,那么就只要搞下前缀和, sum[ i , j ] 区间的和:sum[ j ]-sum[ i ...
- [Xcode 实际操作]三、视图控制器-(2)UITabBarController选项卡(标签)视图控制器
目录:[Swift]Xcode实际操作 本文将为你演示,选项卡视图控制器的创建和使用. 在项目文件夹[DemoApp]上点击鼠标右键,弹出右键菜单. [New File]->[Cocoa Tou ...
- ssh断开后保持程序运行
https://blog.csdn.net/gatieme/article/details/52777721 https://blog.51cto.com/zjking/1117828 https:/ ...
- js 判断当前操作系统 ios, android, 电脑端
一 . js判断移动端的操作系统(ios或Android) $(function () { var u = navigator.userAgent; var isAndroid = u.index ...
- 51Nod 1272 最大距离 (栈或贪心)
#include <cstdio> #include <queue> #include <cstring> #include <iostream> #i ...
- 117 Populating Next Right Pointers in Each Node II 每个节点的右向指针 II
这是“每个节点的右向指针”问题的进阶.如果给定的树可以是任何二叉树,该怎么办?你以前的解决方案仍然有效吗?注意: 你只能使用恒定的空间.例如,给定以下二叉树, 1 / ...