[
注：
来源：时间较久，忘记了
框架：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
<input id="newPage" value="{pigcms:$newpage}" type="hidden">
<input id="hasPage" value="{pigcms:$haspage}" type="hidden">
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
</div>
<div class="news-lists" id="news-lists">
<div class="work_note">
<ul class="clearfix" id="lists">
//加载内容
{pigcms:$list}
</ul>
</div>
</div>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
</div>
</div>
</div>
3.js
<script>
var data,
myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
//刷新
function pullDownAction() {
$.getJSON('{pigcms::U("Work/getwork", array("token" => $_GET["token"]))}&p=0', function (data, state) {
if (data && data.status == 1) {
//本地测试，为了看到加载中效果故加上定时器
setTimeout(function () {
$('#lists').html(data.info.data);
$('#newPage').val(data.info.newpage);
$('#hasPage').val(data.info.haspage);
myScroll.refresh();
}, 600);
}
});
}
//加载更多
function pullUpAction() {
$.getJSON(''{pigcms::U("Work/getwork", array("token" => $_GET["token"]))}&p=' + $("#newPage").val(), function (data, state) {
if (data && data.status == 1) {
//本地测试，为了看到加载中效果故加上定时器
setTimeout(function () {
if ($("#hasPage").val() == '1' || $("#hasPage").val() == 'true') {
$('#lists').append(data.info.data);
$('#newPage').val(data.info.newpage);
$('#hasPage').val(data.info.haspage);
}
myScroll.refresh();
}, 600);
}
});
}
//初始化绑定iScroll控件
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
document.addEventListener('DOMContentLoaded', loaded, false);
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
/**
* 初始化iScroll控件
*/
myScroll = new iScroll('wrapper', {
vScrollbar: false,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
this.minScrollY = 0;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
pullDownAction();
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
pullUpAction();
}
}
});
}
});
</script>
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 .= '<li class="pL5 fl wd90 pR5 bgfff pB1 pT7 shadow">';
if ($value['is_hot'] == '1') {
$html .= '<img src = "' . RES . '/huashu/img/work_img2.png" class = "note_img">';
}
// $html .= '<h3 class = "font12 caaa texR fr">' . date("Y-m-d H:i:s", $value['create_time']) . '</h3>';
$html .= '<div class = "mT10 note_div" style="margin-bottom:12px;"><a href = "javascript:;" ontouchstart = "dialog_info(this)" ontouchend = "after_dialog_info(this)">';
$html .= '<img src = "' . $value['portrait'] . '" width = "15%" style="border-radius:50%;">';
$html .= '<span class = "cabb">' . $value['wechaname'] . '</span></a><span class = "note_span">' . $value['rank'] . '</span></div>';
$html .= '<a href = "' . U('Work/details', array('work_id' => $value['work_id'], 'token' => $_GET['token'])) . '"><br>';
$html .= '<h3 class = "font15 c333 mB5">' . $value['title'] . '</h3>';
// $html .= '<img src = "/uploads/huashu/work/' . unserialize($value['images'])['0'] . '" style = "border-radius:5px;width: 100%;height:160px;"></a>';
$html .= '<p class="font12 caaa" style="line-height:20px;">' . mb_substr($value['content'], 0, 30, "utf-8") . '...</p>';
$html .= '<div class = "pc_data clearfix"><img src = "' . $value['portrait'] . '" width = "46.5" height = "46.5" style = "border-radius:5px;" class = "fl">';
$html .= '<div class = "fl wd40 pL5 lh16" style = "width: 158px;"><h3>';
$html .= '<span class = "font13 c849 fl">' . $value['wechaname'] . '</span>';
$html .= '<img src = "' . RES . '/huashu/img/' . $sex . '.png" width = "13" height = "15"></h3>';
$html .= '<span class = "font13 caaa fl">职位：item.post_name</span><span class = "font13 caaa fl">地区：' . $value['addr'] . '</span></div>';
$html .= '<span class = "wd100 font12 caaa fl lh16">个性签名：' . $value['person_signature'] . '</span></div>';
$html .= '<P class="mT5 caaa content_p" style="clear:both;display: block;height: 20px;margin: 10px auto;">';
$html .= '<span class="fl time_image images">' . date("Y-m-d H:i:s", $value['create_time']) . '</span>';
$html .= '<span class="fr content_span look_image images"> ' . $value['score'] . ' </span>';
$html .= '<span class="fr content_span good_image images"> ' . $value['support_num'] . ' </span>';
$html .= '<span class="fr content_span point_image images"> ' . $value['view_num'] . ' </span></P></a></li>';
}
if (empty($html)) {
$html = '<li class="pL5 fl wd90 pR5 bgfff pB1 pT7 shadow"><h3 class="font15 c333 mB5">暂无作业</h3></li>';
}
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属性，直接说明需要调用什么功能
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。
accept表示，直接打开系统文件目录。
2）
input:file标签还支持一个multiple属性，表示可以支持多选，如：
<input type="file" accept="image/*" multiple>
加上这个multiple后，capture就没啥用了，因为multiple是专门用来支持多选的。
