移動微社區----附手機端滑動分頁源碼

時間  2019-12-05
標籤 移動 社區 手機 滑動 分頁 源碼 欄目 無線 简体版
原文   原文鏈接

     背景：樓主目前在一家作電子商務的公司上班，公司已有成熟的商城系統，社區系統，以及CMS框架。javascript

     而作社區的，最大的就是騰訊。今年大概三月份的時候，騰訊推出了微社區。推出了就推出了吧，這也沒啥。關鍵是須要使用的人微信服務號超過10000人關注這就受不了了。咱們不能爲了使用這個平臺而去刷關注吧。而巧的是，這個平臺讓咱們老總給看見了。老總用了幾回，甚是歡喜啊。說是將來是移動手機端的時代，手機用戶會大大多於PC客戶端用戶。而咱們主要又是賣產品的，總不能叫客戶去用騰訊的產品吧，並且人騰訊還不讓通常人用。這可如何是好呢？在咱們技術團隊面前唸叨了好幾回以後，終於忍不住了，我們本身照着它開發一套吧。java

      我們本身開發一套？有沒有搞錯？騰訊那麼多人的團隊開發出來的產品，要咱們這幾我的去搞？圖1是拉鉤網的微社區。ajax

      以上是經過Chrome模擬的Iphone5的界面，Chrome的這一功能真的很強大啊，能夠經過瀏覽器直接模擬各類移動端設備。設置方法：先按F12打開調試面板，而後按Esc啓動如下畫面，而後就能夠切換設備了，完成以後點擊Emulate，這樣瀏覽器就能夠直接當移動設備了。如圖2：數據庫

    

      說到Chrome，以前有段時間服務一直沒法訪問，如今又能夠了，IP：74.125.205.113。json

      這個事情從三月份就提出來了啊，因爲期間各類任務，都抽不出時間，因此一直拖到了6月中旬。那時候剛好我手上的工做忙得差很少了，因而老總髮話了，你來吧。瀏覽器

      因爲此時項目組其餘同事都還在忙別的活，而老總又以爲這個東西沒啥功能，因此我就只能硬着頭皮來了。在網上好好的走了一下他的流程。發現具體的功能以下：微信

      加入小組，發表發話，評論話題，分享話題，贊和取消贊，我的主頁，他人主頁，Ta的話題，個人話題，個人消息，帖子詳情，話題分類，話題列表……應咱們老總的強烈要求，還得加上我的中心，更改頭像，更改密碼，登陸功能，註冊功能。cookie

      還好以前PC端SNS部分作得還算熟練，仔細分析了一下技術上基本沒什麼難點。而數據庫表和底層代碼均可複用以前PC端的，因此我更是信誓旦旦的承諾，沒問題！就這樣單槍匹馬的就上陣了，後來那個悔啊……app

      實現的詳細過程就不細說了，有問題的幾個地方這裏記錄下。框架

      第一：發佈話題，下圖（圖3）是發佈話題頁面，這是騰訊官網的。

      從這個圖中咱們能夠看到，這個發表話題是能夠發表表情，圖片（騰訊官網能夠發8張），以及文字的，而且對文字的長度作了限制。作發話題的時候遇到了三個問題，一個是咱們以前數據庫涉及和底層代碼發表話題時僅支持1張圖片，這部分因爲時間問題就沒作修改；一個是這個字數限制：咱們都知道textBox能夠經過MaxLength屬性來設置最大輸入字符數。但是經過這個屬性設置的一個最大問題就是，不區分中英文。而咱們體驗一下騰訊的官網就能夠知道，他這個字數限制是區分中英文的。以後的解決方案是：綁定這個textBox的input propertychange事件，同時經過腳本計算可輸入長度，如下腳本是計算輸入字符的長度（區別中英文），可是這樣沒法避免粘貼時字數超過限制，上圖就出現了負數；另一個問題至今還未解決，哪位同僚有解決方案提供將感激涕零。咱們看到那個表情是分不一樣頁的，也就是說能夠滑動的！就是這個滑動，至今爲找到解決方案。在網上有人說監測TouchStart、TouchMove和TouchEnd事件能夠解決，但是試過以後發現結果不太理想啊。因此我這邊暫時的解決方案就是點擊下邊小圓點來實現切換。如下是監測輸入字符的長度：  

//字符長度判斷
function textareastrlen(str) {
    var len;
    var i;
    len = 0;
    for (i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 255) {
            len += 2;
        }
        else {
            len++;
        }
    }
    if (len % 2 != 0) {
        len = len + 1;
    }
    return parseInt(len / 2);
}
View Code

     第二個就是查看圖片：（如下左圖是騰訊官網的圖片查看效果，右圖是我作出的效果）

  

      

     開始也是想模擬騰訊的這種效果，直接在上邊加一個遮罩層。後來發現這樣有問題，騰訊這個只要細看也能夠看出問題，遮罩層下邊的內容其實在移動。另一個缺陷就是圖片點擊放大後，位置控制很差，在PC端位置居中了但是到了手機上位置硬是不能居中，後來無奈之下用了以前用的一款神器插件：PhotoSwipe，這是一款很強大的圖片查看器，還能夠自動滑動，詳細介紹請看Demo。

      第三個就是今天要給源碼的分頁問題。通常在PC上咱們要分頁都是經過上一頁和下一頁來實現的，但是在手機端若是還經過這種方式分頁的話用戶的體驗會大大的降低，因此就經過當下滑到必定程度的時候自動加載下一頁面。而那個程度怎麼監測呢，咱們能夠經過頁面上的某個元素來檢查。實現思路：首先加載部分數據，當下滑到某個元素可見的時候，若是還有數據，則新發送請求，而後追加在當前頁面。如下是頁面代碼：

            @foreach (var item in Model.TopicList)
            {
<div class="topicBox" id="t_@(Model.Topic.TopicID)">
</div>
            }
View Code

    注意，因爲這裏是一個foreach循環，因此我能夠監測最後一個class爲topicBox的div元素，若是他出如今當前可視區域了，則說明該向後臺發請求了。監測是否在可視區域代碼：

        //判斷元素是否進入可視區域 
        function see(objLiLast) {
            //瀏覽器可視區域的高度 
            var see = document.documentElement.clientHeight;
            //滾動條滑動的距離 
            var winScroll = $(this).scrollTop();
            //距離瀏覽器頂部的 
            var lastLisee = $(objLiLast).offset().top;
            return lastLisee < (see + winScroll) ? true : false;
        }
View Code

   發送請求代碼：   

var page = 1;
        var pageTotal = parseInt($("#allpage").val());
        //是否請求出AJAX的「開關」； 
        var onOff = true;
        $(window).scroll(function () {
            //拖動滾條時，是否發送AJAX的一個「開關」 
            $(".topicBox").each(function () {
                //引用最後一個div 
                var lastLi = $(".topicBox:last");
                //調用是否進入可視區域函數 
                var isSee = see(lastLi);
                if (isSee && onOff && page < pageTotal) {//最底部元素可見，開關開啓並且還有下拉
                    $("#loadNext").show(); //顯示正在加載圖標
                    onOff = false;
                    $.ajax({
                        url: "@(ViewBag.BasePath)Home/GetPageData",
                        type: "POST",
                        dataType: "Json",
                        data: {
                            page: page+1
                        },
                        asyc: false,
                        success: function (result) {
                            if (result.status == "success") {
                                var data = result.result;
                                for (var i = 0; i < data.length; i++) {
                                    if (data[i].imageUrl) {//有圖片
                                        $("#allThreadList").append('xxx');
                                    } else {//無圖片
                                        $("#allThreadList").append('xxx');
                                    }
                                    
                                    
                                    $("#t_" + data[i].topicId).append('<div class="topicList" id="topic_' + data[i].topicId + '"><ul id="replyList_' + data[i].topicId + '" class="replyUl" itemid="' + data[i].topicId + '"> </ul> </div>');
                                    var replyList = data[i].replyList;
                                    if (replyList) {
                                        if (replyList.length > 3) {//3條評論以上
                                            for (var j = 0; j < 3; j++) {
                                                $("#replyList_" + data[i].topicId).append('<li id="p_6_13" uid="6419340" author="ff。"><a href="javascript:;" class="sW fl"><span>' + data[i].replyList[j].replynickName + '：</span>' + data[i].replyList[j].replyContent + '</a></li>');
                                            }
                                            $("#topic_" + data[i].topicId).append('<p id="rCount_6" class="more"><a href="@(ViewBag.BasePath)MSNS/Home/TopicReply/' + data[i].topicId + '?viewName=TopicDetail">更多</a>共<span class="replyCount" itemid="' + data[i].topicId + '">' + data[i].replyList[j].replyCount + '</span>條評論</p>');
                                        } else {//評論數小於三條
                                            for (var h = 0; h < replyList.length; h++) {
                                                $("#replyList_" + data[i].topicId).append('<li id="p_6_13" uid="6419340" author="ff。"><a href="javascript:;" class="sW fl"><span>' + data[i].replyList[h].replynickName + '：</span>' + data[i].replyList[h].replyContent + '</a></li>');
                                            }
                                        }
                                    }
                                };
                            }
                            $("#loadNext").hide(); //隱藏正在加載
                            onOff = true;
                            page ++;
                        }
                        
                    });

                }
            });
        });
View Code

   這是前臺請求的代碼，注：由於請求回來須要追加的元素較多，因此這裏代碼會有點亂，可是不影響功能。後臺代碼：

 groupInfo.TopicList = new PagedList<Model.SNS.GroupTopics>(
                bllTopic.GetTopicListPageByGroup(GroupId, startIndex, endIndex, false)
                , page, pagesize, toalcount);
            if (groupInfo.TopicList != null && groupInfo.TopicList.Count > 0)//有話題
            {
              Model.SNS.GroupTopics groupTopics;
                JsonObject jsonObject;
                JsonObject reply;
                HttpCookie cookie;
                List<JsonObject> replyList=new List<JsonObject>();
                List<JsonObject> resultList=new List<JsonObject>();
                foreach (Model.SNS.GroupTopics item in groupInfo.TopicList)//遍歷話題列表
                {
                    groupTopics = groupTopicsBll.GetModelByCache(item.TopicID);
                    jsonObject=new JsonObject();
                    if (null != groupTopics)
                    {
                        if (null != CurrentUser)
                        {
                            cookie = Request.Cookies["topicFav_" + groupTopics.TopicID + CurrentUser.UserID];
                            if (null != cookie) //取消贊
                            {
                                jsonObject.Put("support", "support");
                            }
                            else
                            {
                                jsonObject.Put("support", "nosupport");
                            }
                        }
                        jsonObject.Put("uid", groupTopics.CreatedUserID);
                        jsonObject.Put("topicId", groupTopics.TopicID);
                        jsonObject.Put("nickName",groupTopics.CreatedNickName);
                        jsonObject.Put("createdDate", Web.Components.DateTimeHelper.ConvertDateToTime(groupTopics.CreatedDate));
                        jsonObject.Put("description",Server.HtmlDecode(ViewModel.ViewModelBase.ReplaceFace(groupTopics.Description)));
                        jsonObject.Put("imageUrl", Web.Components.FileHelper.GeThumbImage(groupTopics.ImageUrl, "T180X120_"));
                        jsonObject.Put("ref", groupTopics.ImageUrl);
                        jsonObject.Put("favCount",groupTopics.FavCount);
                        List<Model.SNS.GroupTopicReply> list = bllReply.GetTopicReplyByTopic(groupTopics.TopicID, startIndex, endIndex);
                        if (null != list && list.Count > 0)
                        {
                            foreach (Model.SNS.GroupTopicReply topicReply in list)
                            {
                                reply = new JsonObject();
                                reply.Put("replynickName", topicReply.ReplyNickName);
                                reply.Put("replyContent", Server.HtmlDecode(ViewModel.ViewModelBase.ReplaceFace(topicReply.Description)));
                                reply.Put("replyCount", list.Count);
                                replyList.Add(reply);
                            }
                            jsonObject.Put("replyList", replyList); 
                        }
                    }
                   resultList.Add(jsonObject);
                }
               // return new Result(ResultStatus.Success,resultList);
                json.Put("status", "success");
                json.Put("result", resultList);
                return Json(json);
            }
View Code

  至此，整個滑動分頁就完成了。其餘的功能開發起來都還算順利，若是對功能實現有疑問的歡迎你們一塊兒交流，謝謝。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程