前端页面分页加载刷新

[
注：
来源：时间较久，忘记了
框架：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/[email protected]) 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 .= '';
            }
//                $html .= '
' . date("Y-m-d H:i:s", $value['create_time']) . '
';
            $html .= '
';
            $html .= '';
            $html .= '' . $value['wechaname'] . '' . $value['rank'] . '
';
            $html .= '
';
            $html .= '
' . $value['title'] . '
';

//                $html .= '';
            $html .= '
' . mb_substr($value['content'], 0, 30, "utf-8") . '...
';
            $html .= '
';
            $html .= '
';
            $html .= '' . $value['wechaname'] . '';
            $html .= '
';
            $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是专门用来支持多选的。