一篇灌水般的文章

　　这段时间确实够糟了,可能是情商太低吧，哈哈，程序猿的通病吧。工作上和所谓的项目负责人各种怄气，生活上，对于很多东西都不会表达，或者词不达意吧，给人一种不老实的感觉吧。好了，吐槽完毕，言归正传。

　　这段时间完全负责了一个项目的开发。说来惭愧，工作了将近6年，这是第一次我完全主导开发的一个项目，虽然项目不大，但确给了我十足的压力。可能是经验不够，可能是对某些技术不太精通吧，不过总算挺过去了。历时3个多月，终于项目验收完毕了，我总算都可以松口气了。

　　先来说说项目的结构，由H5和后台管理两部分构成，主要架构是EF+Repository+MVC+Angular+MUI。这种模式在现在.NET的开发中算是常见的了。

　　先来说说H5部分，由于之前一直是做管理系统，对界面的要求不高，所以这次第一次做这种系统，界面成了这个项目最吃紧的地方。什么下拉刷新的，拍照的，上传图片的，一概都是缺乏相关的经验。不过还好的是，公司配备了相关的前端人员，其实就是css的开发人员，js还是地我全部操刀。

　　H5采用了Angular+MUI的开发模式，不得不说的是，MUI的技术文档真是少的可怜，可能这框架样式确实不怎么好看吧，不过没有办法，毕竟是前端人员选的，也只有这个框架有经验。所以在使用这个框架的时候，真是各种问题出现，不过还好，通过看源码，还是能解决的。

　　说了那么多，现在来说说项目中使用MUI遇到的一个问题吧，希望对大家有点帮助吧。

　　相信做过H5的，下拉刷新是肯定不能少的，在这个项目里，我就遇到了一个这样的问题。当搜索内容比较多的时候，做了一个分页显示。所以就使用了MUI的下拉刷新功能，简单配置了一下。如下的两段代码，确实已经能够满足了。但确有一个问题，那就是当你换了个搜索的关键字，再点查询的时候，下拉刷新就不起作用了。这时候，不得不各种查看MUI的官方文档，各种百度，问题还是没有解决。最后，没有办法，不得不去看MUI的源码了。这里不得不说，google确实是太强大了,打开已经被压缩的MUI源文件，找到endPullupToRefresh的这个方法的位置(其实我们已经定位到了这个问题的根本原因了，是没有刷新的问题),看有没有方法是官方文档中没有提到的。然后终于找到了一个refresh的方法（这里不得不吐槽一下，文档不多的框架，建议还是不要随便用）。然后在每次执行搜索之前要调用一下这个refresh方法，才能下拉刷新。

　　好了，灌水完毕。

 mui.init({
                    pullRefresh: {
                        container: "#offCanvasContentScroll2",
                        up: {
                            height: 50,
                            auto: false
                        }
                    }
                });
                mui('#offCanvasContentScroll2').on('tap', 'a', function () { document.location.href = this.href; });

　　　　　　　　　　pageNo += 1;
　　　　　　　　　　$http.post("", { type: $scope.type, keyword: $scope.keyword, rows: 10, page: pageNo }).then(function (response) {
　　　　　　　　　　　　var result = response.data;
　　　　　　　　　　　　$scope.resultCount = result.totalCount;
　　　　　　　　　　　　$scope.pageCount = result.totalPage;
　　　　　　　　　　　　if (result.organizations) {
　　　　　　　　　　　　　　for (var i = 0; i < result.organizations.length; i++) {
　　　　　　　　　　　　　　　　　　$scope.organizations.push(result.organizations[i]);
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　　　　　if (pageNo == $scope.pageCount) {
　　　　　　　　　　　　　　mui('#offCanvasContentScroll2').pullRefresh().endPullupToRefresh(true);
　　　　　　　　　　　　} else {
　　　　　　　　　　　　　　mui('#offCanvasContentScroll2').pullRefresh().endPullupToRefresh(false);
　　　　　　　　　　　　}
　　　　　　　　　　});
　　　　　　}
　　　　　　　　　　mui("#offCanvasContentScroll2").on('tap', 'li', function (event) {
this.click();
});

 

function pullupRefresh() {
　　　　　　　　　
　　　　　　　　　　//这是搜索后能再下拉刷新的关键点
　　　　　　　　　　mui('#offCanvasContentScroll2').pullRefresh().refresh(1);
                if ($scope.organizations.length > 0 || $scope.keyword != "") {
                    pageNo += 1;
                    $http.post("", { type: $scope.type, keyword: $scope.keyword, rows: 10, page: pageNo }).then(function (response) {
                        var result = response.data;
                        $scope.resultCount = result.totalCount;
                        $scope.pageCount = result.totalPage;
                        if (result.organizations) {
                            for (var i = 0; i < result.organizations.length; i++) {
                               $scope.organizations.push(result.organizations[i]);
                            }
                        }
                        if (pageNo == $scope.pageCount) {
                            mui('#offCanvasContentScroll2').pullRefresh().endPullupToRefresh(true);
                        } else {
                            mui('#offCanvasContentScroll2').pullRefresh().endPullupToRefresh(false);
                        }
                    });
                }
                mui("#offCanvasContentScroll2").on('tap', 'li', function (event) {  
                    this.click();
                });
            }