php让前端刷新页面,前端页面分页加载刷新

本文介绍了前端页面的CSS样式设计,包括阴影效果、布局定位以及列表样式的实现。同时,详细讲解了在work.html中实现下拉刷新加载内容的JavaScript和PHP代码,涉及到Ajax分页加载和数据处理。此外,提到了如何通过HTML input标签调用用户手机相机的功能。
摘要由CSDN通过智能技术生成

[

注:

来源:时间较久,忘记了

框架:thinkPHP

]

1、css 样式

/*

.shadow{box-shadow:10px 10px 5px #D8D8D8}

*/

#wrapper{position:absolute;left:0;top:135px;bottom:50px;width:100%;background-color:#E3E4E8;z-index:10}

.news-lists .item{height:40px;line-height:40px;border-bottom:1px solid #CFCFCF}

#pullDown,#pullUp{background:#fff;height:40px;line-height:40px;padding:5px 10px;border-bottom:1px solid #ccc;font-weight:700;font-size:14px;color:#888}

#pullDown .pullDownIcon,#pullUp .pullUpIcon{display:block;float:left;width:40px;height:40px;background:url(http://sandbox.runjs.cn/uploads/rs/200/ptvnx6ur/pull-icon@2x.png) 0 0 no-repeat;-webkit-background-size:40px 80px;background-size:40px 80px;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:250ms}

#pullDown .pullDownIcon{-webkit-transform:rotate(0) translateZ(0)}

#pullUp .pullUpIcon{-webkit-transform:rotate(-180deg) translateZ(0)}

#pullDown.flip .pullDownIcon{-webkit-transform:rotate(-180deg) translateZ(0)}

#pullUp.flip .pullUpIcon{-webkit-transform:rotate(0) translateZ(0)}

#pullDown.loading .pullDownIcon,#pullUp.loading .pullUpIcon{background-position:0 100%;-webkit-transform:rotate(0) translateZ(0);-webkit-transition-duration:0s;-webkit-animation-name:loading;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear}

@-webkit-keyframes loading{from{-webkit-transform:rotate(0) translateZ(0)}

to{-webkit-transform:rotate(360deg) translateZ(0)}

}

.pc_data{left:50px;display:none}

.images{padding-left:15px;height:15px;line-height:15px}

.time_image{background:url(../img/work_img4.png) 0 0 no-repeat;background-size:15px 15px}

.look_image{background:url(../img/mywork_img1.png) 0 0 no-repeat;background-size:15px 15px}

.good_image{background:url(../img/work_img3.png) 0 0 no-repeat;background-size:15px 15px}

.point_image{background:url(../img/work_img5.png) 0 0 no-repeat;background-size:15px 15px}

2、work.html

下拉刷新...

//加载内容

{pigcms:$list}

上拉加载更多...

3.js

4.WorkAction.class.php\getwork

WorkAction.class.php

public function getwork() {

$homework = D("Homework");

import('ORG.Util.Page'); // 导入分页类

...

$count = $homework->alias('a')

->distinct(true)

->join($join)

->where('a.`status` = 1 and is_show = 1 and token = ' . $_GET['token'])

->order($order)

->where($where)

->count(); // 查询满足要求的总记录数

IS_AJAX && $_GET['p'] = $_GET['p'] + 1; // AJAX设置查询下一页

$Page = new Page($count, C('page_sizes')); // 实例化分页类 传入总记录数和每页显示的记录数

$show = $Page->show(); // 分页显示输出

$list = $homework->alias('a')

->field('a.id as work_id,a.*,b.*')

->join($join)

->where('a.`status` = 1 and is_show = 1 and token = ' . $_GET['token'])

->where($where)

->order($order)

->limit($Page->firstRow . ',' . $Page->listRows)

->select();

$html = '';

foreach ($list as $value) {

//以下是循环文本,可作为参考

$sex = $value['sex'] == '1' ? 'nan' : 'nv';

$html .= '

';

if ($value['is_hot'] == '1') {

$html .= '

work_img2.png';

}

// $html .= '

' . date("Y-m-d H:i:s", $value['create_time']) . '';

$html .= '';

$html .= '

' . $value['title'] . '';

// $html .= '

'%20.%20unserialize(%24value%5B'images'%5D)%5B'0'%5D%20.%20'';

$html .= '

' . mb_substr($value['content'], 0, 30, "utf-8") . '...';

$html .= '

'%20.%20%24value%5B'portrait'%5D%20.%20'';

$html .= '

';

$html .= '' . $value['wechaname'] . '';

$html .= '

'%20.%20%24sex%20.%20'.png';

$html .= '职位:item.post_name地区:' . $value['addr'] . '';

$html .= '个性签名:' . $value['person_signature'] . '';

$html .= '

';

$html .= '' . date("Y-m-d H:i:s", $value['create_time']) . '';

$html .= '' . $value['score'] . '';

$html .= '' . $value['support_num'] . '';

$html .= '' . $value['view_num'] . '';

}

if (empty($html)) {

$html = '

暂无作业';

}

if (IS_AJAX) {

$this->success(array('data' => $html, 'newpage' => $Page->nowPage, 'haspage' => $Page->nowPage < $Page->totalPages));

}

$this->assign('list', $html); // 赋值数据集

$this->assign('newpage', $Page->nowPage);//当前页

$this->assign('haspage', $Page->nowPage < $Page->totalPages);//是否有下一页 true/false

}

5.拓展知识:

怎么样调取用户手机照相机] 来源:(http://www.cnblogs.com/yw-ah/p/6112677.html)

如下:

1)

使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能

capture表示,可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。

accept表示,直接打开系统文件目录。

2)

input:file标签还支持一个multiple属性,表示可以支持多选,如:

加上这个multiple后,capture就没啥用了,因为multiple是专门用来支持多选的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值