js点击加载更多可以增加几条数据的显示
<div class="list">
<div class="one">
<div class="img">
<img src="../img/b6c.png"/>
</div>
<div class="infor">
<p class="detail">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p class="time">2018-6-28</p>
</div>
</div>
<div class="one">
<div class="img">
<img src="../img/lunbo3.png"/>
</div>
<div class="infor">
<p class="detail">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊</p>
<p class="time">2018-6-28</p>
</div>
</div>
</div>
<div class="more">加载更多</div>
在一个项目中,需要点击更多,之后显示更多的数据,不是获取当前的页面的高度自动加载的 所以算不上懒加载,是js控制的
上面是一些页面的代码
下面是css样式
.newcenter .detail .list {
overflow: hidden;
} .newcenter .detail .list .one {
margin-top: 0.2rem;
height: 1.68rem;
display: flex;
justify-content: space-between;
} .newcenter .detail .list .one .img {
width: 1.41rem;
height: 1.28rem;
} .newcenter .detail .list .one .img img {
width: 1.41rem;
height: 1.28rem;
} .newcenter .detail .list .one .infor {
width: 5.56rem;
position: relative;
} .newcenter .detail .list .one .infor .detail {
margin-top: 0.1rem;
} .newcenter .detail .list .one .infor .detail {
font-size: 0.18rem;
font-family: MicrosoftYaHei;
font-weight: bold;
color: rgba(97, 97, 97, 1);
} .newcenter .detail .list .one .infor .time {
font-size: 0.18rem;
font-family: MicrosoftYaHei;
font-weight: bold;
color: rgba(173, 173, 173, 1);
text-align: right;
position: absolute;
top: 1.3rem;
right:;
}
.newcenter .more{
width: 2.2rem;
height: 0.8rem;
margin: 0 auto;
font-size: 0.24rem;
background: #A9010A;
border-radius: 0.2rem;
text-align: center;
line-height: 0.8rem;
color: #FFFFFF;
margin-top: 0.5rem;
}
具体的js的如下:
var arr = $('.detail .list .one').length; //新闻的长度
var textArr =[]; //新闻列表信息
var arr =[]; //每次显示的内容
var num = 1; //点击次数 //获取新闻列表信息
$('.detail .list .one').each(function(index){
var t = $(this).html();
textArr.push(t) }) //初始化显示的几条新闻信息
for(var i = 0; i<3;i++){
var txt = "<div class='one'>"+textArr[i]+"</div>"
arr.push(txt);
}
//页面初始化渲染
$('.detail .list').html(arr); //点击加载更多
$('#more').click(function(){
num++;
for(var i = arr.length + 1; i < 3 * num; i++) { if(arr.length< textArr.length){
var txt = "<div class='one'>" + textArr[i] + "</div>"
arr.push(txt)
}else{
$(this).html('没有更多了');
return;
} }
$('.detail .list').html(arr); })
职场小白,有不正确的或者有更多的可以提意见 耶
js点击加载更多可以增加几条数据的显示的更多相关文章
- Jquery点击加载更多
一.点击加载更多有点像分页获取数据类似,下面是本人写的一个简单的小例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- js实现『加载更多』功能实例
DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...
- ajax点击加载更多数据图片(预加载)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
- Spring+Hibernate+struts2+JPA 注解+跨域//完成手机端点击加载更多 下拉加载更多
一.使用IDEA新建一个maven项目(student) 1.1.0编写pom文件,添加项目所需要的包 <?xml version="1.0" encoding=" ...
- PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...
- PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...
- tableView中的“点击加载更多”点击不到
假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...
随机推荐
- it入门之:学会使用Git 分布式版本控制工具
环境:window 工具:git & TortoiseGit 下载安装以及配置环境变量 :略略略 创建Github账户:登录https://github.com/用自己的常用邮箱创建账户,用来 ...
- FineUI 相关
FineUI 相关(ExtAsp.Net 2008-2017),记在这把,免得找不到了. 不知道同年代的类似项目Coolite怎么样了?更名为Ext.net了,在国外活得还算滋润,在国内嘛..死贵死贵 ...
- python 七段管模块
python 七段管模块 def drawGap(): #绘制数码管间隔 turtle.penup() turtle.fd(5) def drawLine(draw): #绘制单段数码管 drawGa ...
- Maven不能下载SNAPSHOT包但是能下载RELEASE包的解决办法
在使用过程中,Maven默认配置是不能下载SNAPSHOT包的,这是基于一种代码稳定性进行考量得出的结论.引入SNAPSHOT包最大的问题就是,由于SNAPSHOT允许重复上传,所以引用一个这样的包开 ...
- 选择排序java实现
package text.algorithm; /** * 选择排序 * O(n^2);空间复杂度O(1); */public class SelectionSort { public static ...
- redis 在 php 中的应用(Hash篇)
本文为我阅读了 redis参考手册 之后结合 博友的博客 编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) Redis hash 是一个string类型的f ...
- 关于linux系统CPU篇--->不容易发现的占用CPU较高进程
1.系统的CPU使用率,不仅包括进程用户态和内核态的运行,还包括中断处理,等待IO以及内核线程等等.所以,当你发现系统的CPU使用率很高的时候,不一定能找到相对应的高CPU使用率的进程 2.案例分析, ...
- OO第二次博客作业—17373247
OO第二次博客作业 零.写在前面 OO第二单元宣告结束,在这个单元里自己算是真正对面向对象编程产生了比较深刻的理解,也认识到了一个合理的架构为编程带来的极大的便利. (挂三次评测分数 看出得分接近等差 ...
- 使用session和cookie实现用户登录:一个登录页面,一个servlet,一个登录成功页面
文件目录 1.登录页面 <%@ page language="java" contentType="text/html; charset=utf-8" p ...
- GCOV&LCOV&GCOVR入门
索引 一.概述 二.关于gcov的安装 三.代码覆盖率测试(以GCOV为例) 1.编译源代码 2.运行可执行程序 3.通过gcov指令生成代码覆盖率报告 四.生成更全面.直观的代码覆盖率报告 1.LC ...