移动开发中单页异步加载所有列表项

编程之家收集整理的这篇文章主要介绍了移动开发中单页异步加载所有列表项编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在做WEB开发的时候我们经常会遇到分页的处理,如果在PC上显示网页的话,使用传统的分页是可以接受的。那么,当我们为手机或其他移动端设计界面的话,使用分页未免有些笨拙和难以使用,这时候我们可以使用在单页加载所有列表项。当屏幕滑动到最低端的时候,会出现“点击加载更多”的按钮,当我们点击此按钮的时候,会加载更多的列表信息到当前页。当然,一切都是异步的,所以我们使用Jquery Ajax和后端ThinkPHP的Action通信。

下面先看看前端的代码:HTML

<div class="row" style="margin-top:5px;" id="bikeList">
……已加载的列表项
</div>

<div class="row showmore">
<div class="col-sm-8 col-xs-12">
<a href="javascript:void(0);" onclick="more()">点击加载更多</a>
</div>
</div>

JavaScript:

var p=1;
function more()
{
p++;
//alert(p);

$.get('/doc/more',{'page':p,'参数1':参数1的值,'参数2':参数2的值
……},function(data)
      {
        if(data)
        $('#bikeList').append(data);
         else
          alert("已经没有更多信息了");
      });
}

ThinkPHP Action中的代码

public function more($page,$sn,$bk,$fd,$dr)
{
 $page=$_GET['page'];
 $参数1=$_GET['参数1'];
 $参数2=$_GET['参数2'];
 ……
 $pcount=10;//每次加载的列表数
 $bikeList=$this->getbikeList(参数1,参数2,……,$page,$pcount);
 $this->bikeList=$bikeList;
 $this->display();
 
}

为了方便起见,我们也为这里的More函数建立了视图,不用手写一大推HTML了,其视图代码 More.html如下:

<volist name="bikeList" id="vobike">
具体列表项……
</volist>

这里More.html输出HTML代码就是前面Jquery函数more中的data参数的值。以上是我的一点开发经验的分享,希望能对你有所启发,期待与您的交流。

本文首发于顶求网,转载请注明来源

总结

以上是编程之家为你收集整理的移动开发中单页异步加载所有列表项全部内容,希望文章能够帮你解决移动开发中单页异步加载所有列表项所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

相关文章

猜你在找的Bootstrap相关文章

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图,看看完成后的结果:
顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所以,在首页中主要分三个板块——文章、图书、用户。另外,网站的头部和尾部还要有导航(navigato
在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了我许久,最后通过分析bootcss的源码我发现该网站在所有使用affix的元素的class中都添加了'h
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有的基础上做出更加美观的效果呢,我一直在考虑这个问题。另外,Bootstrap中的tabs必
先看看劳动成果 布局 左右各一半(col-md-6) 左侧登录框占左侧一半的10/12 右侧是登录系统的注意事项 使用到的BootStrap元素 well 输入框组(input-group) 按钮(b
先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个“前5页”和“后5页”显得有点多余,因为点击当前显示第一页
在做WEB开发的时候我们经常会遇到分页的处理,如果在PC上显示网页的话,使用传统的分页是可以接受的。那么,当我们为手机或其他移动端设计界面的话,使用分页未免有些笨拙和难以使用,这时候我们可以使用在单页
为了和文章分类部分的样式进行区分,我决定自己动手写一个具有其他样式的分类标签集。刚好看到豆瓣读书板块的首页中的图书分类标签还不错,于是决定自己写一个类似的样式。首先是HTML代码部分: 可以看到图书分
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注