前端頁面分頁加載刷新

[
注：
來源：時(shí)間較久，忘記了
框架：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">
                         //加載內(nèi)容
                        {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) {
                    //本地測試，為了看到加載中效果故加上定時(shí)器
                    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) {
                    //本地測試，為了看到加載中效果故加上定時(shí)器
                    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'); // 導(dǎo)入分頁類
        ...
 $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(); // 查詢滿足要求的總記錄數(shù)
        IS_AJAX && $_GET['p'] = $_GET['p'] + 1; // AJAX設(shè)置查詢下一頁
        $Page = new Page($count, C('page_sizes')); // 實(shí)例化分頁類 傳入總記錄數(shù)和每頁顯示的記錄數(shù)
        $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) {
        //以下是循環(huán)文本，可作為參考
            $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">地區(qū)：' . $value['addr'] . '</span></div>';
            $html .= '<span class = "wd100 font12 caaa fl lh16">個(gè)性簽名：' . $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">暫無作業(yè)</h3></li>';
        }
        if (IS_AJAX) {
            $this->success(array('data' => $html, 'newpage' => $Page->nowPage, 'haspage' => $Page->nowPage < $Page->totalPages));
        }
        $this->assign('list', $html); // 賦值數(shù)據(jù)集
        $this->assign('newpage', $Page->nowPage);//當(dāng)前頁
        $this->assign('haspage', $Page->nowPage < $Page->totalPages);//是否有下一頁 true/false

}

5.拓展知識：
怎么樣調(diào)取用戶手機(jī)照相機(jī)] 來源：(http://www.cnblogs.com/yw-ah/p/6112677.html)
如下：
1）
使用input：file標(biāo)簽, 去調(diào)用系統(tǒng)默認(rèn)相機(jī)，攝像，錄音功能，其實(shí)是有個(gè)capture屬性，直接說明需要調(diào)用什么功能

<input type="file" accept="image/*" capture="camera">

<input type="file" accept="video/*" capture="camcorder">

<input type="file" accept="audio/*" capture="microphone">

capture表示，可以捕獲到系統(tǒng)默認(rèn)的設(shè)備，比如：camera--照相機(jī)；camcorder--攝像機(jī)；microphone--錄音。

accept表示，直接打開系統(tǒng)文件目錄。

2）
input:file標(biāo)簽還支持一個(gè)multiple屬性，表示可以支持多選，如：

<input type="file" accept="image/*" multiple>

加上這個(gè)multiple后，capture就沒啥用了，因?yàn)閙ultiple是專門用來支持多選的。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,201評論 4贊 61
  • Swift版本點(diǎn)擊這里歡迎加入QQ群交流: 594119878最新更新日期：18-09-17 About A cu...
    ylgwhyh閱讀 26,022評論 7贊 249
  • 孫子生下來就有兩個(gè)名字。家駒是我起的，柏言是兒子起的。當(dāng)然得聽兒子的。所以家駒變成小名。孫子屬馬，請教資深周易...
    且行且珍惜知足常樂閱讀 620評論 4贊 3
  • 家鄉(xiāng)不大，大概就只有十來戶人家左右。當(dāng)然了，那已經(jīng)是很久以前的事情了，現(xiàn)在，很多人都離開家鄉(xiāng)去城市打拼希望有一天能...
    散木君閱讀 659評論 3贊 2
  • 簡書接龍客棧純文字協(xié)會 接龍客棧純文字協(xié)會【七夕接龍】 文 | 默默喜歡你 這是一片灰蒙蒙的天空，看不到任何一顆星...
    默默喜歡你閱讀 607評論 3贊 8

友情鏈接更多精彩內(nèi)容