html前端模拟手机列表页点击加载更多

来源：互联网 2023-03-16 19:11:05 237

列表页很多内容，要是静态简单方法做一个默认六条内容显示，其他的隐藏，当点击底部查看更多就会加载多六条，每次点击都加六条，怎么操作，默认多少条可以自己自行定义

html前端模拟手机列表页点击加载更多

工具/原料

编辑器
电脑

方法/步骤

效果图，默认六条，每次点击查看更多都会多显示六条，

html前端模拟手机列表页点击加载更多

1相关内容非法爬取自百度经验

当点击到最后一行内容的时候便显示已无更多

html前端模拟手机列表页点击加载更多

要是列表页新闻不够六条，输出再加已无更多提示

html前端模拟手机列表页点击加载更多

html代码布局部分，因为我已经做了读取数据库，所以循环加载出来了，相当于前端很多条数据，就很多对li标签从从数据库循环出来

查看更多和已无更多都要有一个类class去控制，下面写jq效果

html前端模拟手机列表页点击加载更多

样式处理，根据个人喜欢调整，隐藏样式是必须的

html前端模拟手机列表页点击加载更多

最主要的来了，jq写法，讲一下思路，第一步获取新闻总条数，判断新闻总数，多于六条（自定义条数）；便开始你的表演写控制，少于就隐藏查看输出已无；第二步，默认六条内容，首先全部隐藏内容加隐藏样式，在给前六个显示（去掉隐藏样式类，加上一个类list自定义记录显示的条数，再给已无按钮一个隐藏），第三步点击效果获取当前的list个数即显示条数，定义一个变量吧获取到的显示条数加六（自定义加多少条）；再判断内容如果变量加到的总数大于总条数li便给输出全部按钮变化；如果小于便执行每次点击加六条，即把获取到的条数去掉隐藏，加上list类记录如图即可；

html前端模拟手机列表页点击加载更多