juqery 下拉加载数据
html 代码 一开始是需要显示的第一页
<div class="hot-product f15 fixed-Width clearfix" id="goods2">
<volist name="goods" id="goods_vo">
<div class="item2">
<div class="H_shangpin" style="background: url('{$goods_vo['banner'][0]}') no-repeat center ;background-size: contain"></div>
<div class="item3">
<p class="H_xianzhi">【{$goods_vo['fenlei']}】{$goods_vo['title']}</p>
<p class="color-red">
<span>¥{$goods_vo['pay']}</span>
<i class="color-b5 h_commodity fr"><del>¥{$goods_vo['yuan_pay']}</del></i>
</p>
<div class="clearfix shangpinming">
<p class="color-b5 h_commodity fl"><span>{$goods_vo['weizhi']}</span><span>{$goods_vo['shang_name']}</span></p>
<p class="fr color-b5 h_commodity ">{$goods_vo['time']}</p>
</div>
</div>
</div>
</volist>
</div>
自动监听下拉,当往下拉的时候就开始访问你指定的控制器
/*下拉分页*/
var nextp = "{$nextp}";//第几页
var oknext = 1;//加载开关
$(window).scroll(function () {
var di = $(window).scrollTop();//获取当前滚动条的位置
var ph = $(window).height();//当前窗口高度
di = di + ph;//最高拉到多少
var h = $(document).height();//允许多长滚动条
if (h - di < 100) {
if (nextp > 0 && oknext == 1) {
oknext = 0;
$.post("{:U('Index/goods')}", {p:nextp}, function (v) {//指定访问的控制器
if(v.index == 2){//这里我是做了一个判断,当需要一排显示两个就走if 当需要一排显示一个的时候就走else
if (v.status) {
oknext = 1;
nextp = v.nextp;
var list = v.list;
//console.log(list);
var html = '';
for (var i = 0; i < list.length; i++) {
html +='<div class="item2">'+
'<div class="H_shangpin" style="background: url('+list[i]['banner'][0]+') no-repeat center ;background-size: contain"></div>'+
'<div class="item3"><p class="H_xianzhi">【'+list[i]['fenlei']+'】'+list[i]['title']+'</p>'+
'<p class="color-red"><span>¥'+list[i]['pay']+'</span>'+
'<i class="color-b5 h_commodity fr"><del>¥'+list[i]['yuan_pay']+'</del></i>'+
'</p>'+
'<div class="clearfix shangpinming">'+
'<p class="color-b5 h_commodity fl"><span>'+list[i]['weizhi']+'</span><span>'+list[i]['shang_name']+'</span></p>'+
'<p class="fr color-b5 h_commodity ">'+list[i]['time']+'</p>'+
'</div>'+
'</div>'+
'</div>'; }
$("#goods2").append(html);
}
}else{
if (v.status) {
oknext = 1;
nextp = v.nextp;
var list = v.list;
var html = '';
for (var i = 0; i < list.length; i++) {
html +='<div class="clearfix H2_pad">'+
'<div class="H2_shangpin fl" style="background: url('+list[i]['banner'][0]+') no-repeat center ;background-size: cover"></div>'+
'<div class="H2_xinxi fl">'+
'<div class="H2_xianzhi">【'+list[i]['fenlei']+'】'+list[i]['title']+'</div>'+
'<div><span class="color-red">¥'+list[i]['pay']+'</span><span class="color-b5 h_commodity fr">'+list[i]['time']+'</span>'+
'</div>'+
'<div class="color-b5 h_commodity">'+
'<del>¥'+list[i]['yuan_pay']+'</del> <span class="fr"><i class="ICON-tousu h_tousu"></i>'+
'<i class="ICON-fen-LOVE '+list[i]['love']+'" data-guanzhu-id="'+list[i]['id']+',2"></i> </span>'+
'</div>'+
'</div>'+
'</div>'
}
$("#goods1").append(html);
}
} }, 'json'); } }
});
控制器方法
/*
**全部商品
**
***/
public function goods(){
$p = I('p',1);
$where['status'] = 1;
if(I('id') != 0){
$where['fenlei_id'] = I('id');
}
$this->index = M('xinxi_goods_if')->getField('index');//首页商品显示问题 单排显示1 还是双排显示2
$count = M('xinxi_goods')->where($where)->count();
$goods = M('xinxi_goods')->where($where)->field('id,title,ben_fenlei_id,uid,weizhi_id,yuan_pay,pay,banner,time,num,admin_user')->order('time DESC')->page($p,6)->select();
$nextpage=$count/6>$p?$p+1:'';
if($p == 1){//第一页的时候显示页面并显示第一个的数据
$this->nextp=$nextpage;
foreach($goods as $k=>$r){
$goods[$k]['time'] = get_date($r['time']);
$goods[$k]['banner'] = explode(',',$r['banner']);
/*商铺店名*/
if(!$r['uid']){
$goods[$k]['shang_name'] = $r['admin_user'];
}else{
$name = get_yonghu($r['uid'],'shang_name');
if(!$name){
$goods[$k]['shang_name'] = '';
}else{
$goods[$k]['shang_name'] = $name;
}
}
/*商品分类*/
$goods[$k]['fenlei'] = M('xinxi_fenlei')->where(array('id'=>$r['ben_fenlei_id']))->getField('title');
/*商城位置ID*/
$goods[$k]['weizhi'] = M('xinxi_weizhi')->where(array('id'=>$r['weizhi_id']))->getField('title');
$guanzhu_where['status'] = 1;
$guanzhu_where['shibie'] = 2;
$uid = session('uid');
if($uid != ''){
$guanzhu_where['uid'] = $uid;
$guanzhu_id = M('xinxi_guanzhu')->where($guanzhu_where)->getField('goods_user');
if($guanzhu_id == $r['id']){
$goods[$k]['love'] = 'active';
}else{
$goods[$k]['love'] = '';
}
}else{
$goods[$k]['love'] = '';
}
}
$this->assign('goods',$goods);
$this->display();
}else{
//第二页的时候就开始返回json数据
//并显示抛回这是第几页
$this->nextp=$nextpage;
foreach($goods as $k=>$r){
$goods[$k]['time'] = get_date($r['time']);
$goods[$k]['banner'] = explode(',',$r['banner']);
/*商铺店名*/
if(!$r['uid']){
$goods[$k]['shang_name'] = $r['admin_user'];
}else{
$name = get_yonghu($r['uid'],'shang_name');
if(!$name){
$goods[$k]['shang_name'] = '';
}else{
$goods[$k]['shang_name'] = $name;
}
}
/*商品分类*/
$goods[$k]['fenlei'] = M('xinxi_fenlei')->where(array('id'=>$r['ben_fenlei_id']))->getField('title');
/*商城位置ID*/
$goods[$k]['weizhi'] = M('xinxi_weizhi')->where(array('id'=>$r['weizhi_id']))->getField('title');
$guanzhu_where['status'] = 1;
$guanzhu_where['shibie'] = 2;
$uid = session('uid');
if($uid != ''){
$guanzhu_where['uid'] = $uid;
$guanzhu_id = M('xinxi_guanzhu')->where($guanzhu_where)->getField('goods_user');
if($guanzhu_id == $r['id']){
$goods[$k]['love'] = 'active';
}else{
$goods[$k]['love'] = '';
}
}else{
$goods[$k]['love'] = '';
}
}
$data['index'] = M('xinxi_goods_if')->getField('index');//首页商品显示问题 单排显示1 还是双排显示2
$data['list']=$goods;
$data['nextp']=$nextpage;
$data['status']=1;
echo json_encode($data);
}
}
juqery 下拉加载数据的更多相关文章
- iscroll5 上拉,下拉 加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
- Jquery手机下拉刷新,下拉加载数据
一.Jquery手机下拉刷新,下拉加载数据.附加有源码 <!DOCTYPE html> <html> <head> <title>手机</titl ...
- 关于MJRefresh的下拉加载数据bug
当没有更多数据的时候显示NoMoreData 我的理解是先结束刷新再显示没有更多 今天之前一直没发现有问题 贴之前的代码 [self.collectionView reloadData]; [self ...
- web移动端下拉加载数据简单实现
//下拉加载在移动端会经常使用,有些小伙伴不清楚一些原理下面就简答的介绍一下 //首先需要监听window的滚动事件,下拉其实就是在监听window滚动事件 var pageNum = 1;//分页第 ...
- 手机网站下拉加载数据js(简单版)
加载内容的地方html <div class="bgcolor_f0 clearfix"> <div class="recharge"> ...
- iscroll5 版本下的 上拉,下拉 加载数据
上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码. <section id="downwraper" class="nodeBottom bot0 bgf ...
- php ajax 下拉加载数据
视图 <html> <head> <title>健康知识</title> <script type="text/javascript&q ...
- Ajax 下拉加载数据
$(document).scroll(function() { var pageHeight = $(document).height()-$(window).height(); var bodySc ...
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
随机推荐
- 【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
- [Python设计模式] 第14章 老板来了——观察者模式
github地址:https://github.com/cheesezh/python_design_patterns 题目 用程序模拟以下情景,在一个办公室里,当老板进门的时候,前台秘书就偷偷通知办 ...
- 在三台Centos或Windows中部署三台Zookeeper集群配置
一.安装包 1.下载最新版(3.4.13):https://archive.apache.org/dist/zookeeper/ 下载https://archive.apache.org/dist/ ...
- ubuntu16.04 npm安装
$ sudo apt-get install python-software-properties $ curl -sL https://deb.nodesource.com/setup_6.x | ...
- 【转】Android系统开篇
版权声明:本站所有博文内容均为原创,转载请务必注明作者与原文链接,且不得篡改原文内容.另外,未经授权文章不得用于任何商业目的. 一.引言 Android系统非常庞大.错综复杂,其底层是采用Linux作 ...
- Spring 事务 readOnly 到底是怎么回事?
Spring的事务经常会有这样的配置: 1 <tx:method name="search*" read-only="true" /> 或者这样的注 ...
- 强化学习-时序差分算法(TD)和SARAS法
1. 前言 我们前面介绍了第一个Model Free的模型蒙特卡洛算法.蒙特卡罗法在估计价值时使用了完整序列的长期回报.而且蒙特卡洛法有较大的方差,模型不是很稳定.本节我们介绍时序差分法,时序差分法不 ...
- [转]Linux下网络常用命令和工具
转自:http://int32bit.me/2016/05/04/Linux%E5%B8%B8%E7%94%A8%E7%BD%91%E7%BB%9C%E5%B7%A5%E5%85%B7%E6%80%B ...
- ios vue2.0使用html5中的audio标签不能播放音乐
我写了一个M端播放音乐的组件,使用html5的audio标签 然后我使用watch监测currentSong 在浏览器中看到audio渲染的如下: 单独访问渲染出来的audio中url可以播放音乐,为 ...
- Kafka文件存储机制及offset存取
Kafka是什么 Kafka是最初由Linkedin公司开发,是一个分布式.分区的.多副本的.多订阅者,基于zookeeper协调的分布式日志系统(也可以当做MQ系统),常见可以用于web/nginx ...