Framework7 + Angular 开发问题解决汇总

Posted lyr1213

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Framework7 + Angular 开发问题解决汇总相关的知识,希望对你有一定的参考价值。

本篇主要汇总一下使用Framework7 + Angular 开发中遇到的一些难点及我的解决方法,以后再遇到会在这里继续更新。

一、页面表格按需加载

情况描述:默认加载10条,在用户上拉页面是再进行下一页的内容加载。

解决方法:利用Framework7 的无限滚动。

1、页面:

<tbody id="orderContent">
     <tr ng-repeat="order in orderInfoList">
         <td><span ng-if="order.orderNo == null">--</span><span ng-if="order.orderNo != null">{{order.orderNo}}</span></td>
         <td><span ng-if="order.orderType == null">--</span><span ng-if="order.orderType != null">{{order.orderType}}</span></td>
         <td><span ng-if="order.completeStatus == null">--</span><span ng-if="order.completeStatus != null">{{order.completeStatus}}</span></td>
         <td class=" ">
             <button class="btn btn-primary btn-xs" ng-click="selectOrderInfoDetailModel($index);">详情</button>
             <button class="btn btn-warning btn-xs" ng-click="deleteOrderInfoDetailModel($index);">删除</button>
         </td>
      </tr>
</tbody>

 将后面加载的内容插入到 id="orderContent" 的 tbody 中。

2、js(只显示关键代码,其他用省略号代替):

            ......
            $scope.queryParam = {};
            
            ......
            // 初始化分页参数
            $scope.pgPageInfo = {
                pageNum: 1,
                pageSize: 20
            };
            // 初始化 无限加载 参数
            var $$ = Dom7;
            var loading = false;

            $$(‘.infinite-scroll‘).on(‘infinite‘, function () {
                moreOrderInfo();
            });

            function moreOrderInfo() {
                var lastLoadedIndex = $$(‘#orderContent tr‘).length;

               ......

                // 全部内容加载完后,显示底线,return
                if (lastLoadedIndex >= $scope.pgPageInfo.total) {
                    $(‘#orderNomore‘).show();    
                    return;
                }

                var param = $scope.queryParam;  // 查询参数
                param.pageInfo = {
                    pageNum: $scope.pgPageInfo.pageNum + 1,
                    pageSize: 20
                };           
                    
     PiecesListFactory.queryOrderInfoRequest(param).then(function (data) {
                    loading = false;

                    app.myApp.hideIndicator();

                    ModalFactory.hideLoading();
                    if (null == data) {
                        app.myApp.detachInfiniteScroll($$(‘.infinite-scroll‘));
                        $$(‘.infinite-scroll-preloader‘).remove();
                    } else {
                        $scope.pgPageInfo = data.pageInfo;

                        var orderhtml = "";
                        for (var i = 0; i < data.result.length; i++) {
                            // 循环data.result,得到拼接的orderHtml 
                        }
                 
                        $(‘#orderContent‘).append(orderHtml); // 将加载的内容插入到页面

                        lastLoadedIndex = $$(‘#orderContent tr‘).length;

                    }

                }, function (data) {
                    app.myApp.hideIndicator();
                    ModalFactory.alert("数据加载失败!");
                });
            }

 

 

 

 

 3、还有一个地方,就是在angular初始化的时候,要对列表内容块加上Framework7 的滚动监听

           var init = function () {
                
                app.myApp.attachInfiniteScroll($$(".infinite-scroll"));

            };
            init();

 

二、页面中 angularJS 动态加载的内容,ng-click 无效

情况描述:完成了上面的列表内容动态加载,又遇到了一个问题,如果加载的内容不触发事件,就完事了,可是我这里,列表有个操作(详情,删除),所以之后发现动态加载的内容中 angularJS 的 ng-click 无效。。。

解决方法:用 $compile服务 编译一下动态加载的内容。

将上面的    $(‘#orderContent‘).append(orderHtml);   中的动态内容 orderHtml 处理一下::

var orderLink = $compile(orderHtml);
$(‘#orderContent‘).append(orderLink($scope));

 

以上是关于Framework7 + Angular 开发问题解决汇总的主要内容,如果未能解决你的问题,请参考以下文章

移动端安卓和 IOS 开发框架 Framework7 布局

Framework7开发笔记之App骨架搭建

(Framework7 移动webapp) Springboot 入门培训 8 Component 模板MVVM与AJAX

推荐H5应用快速开发UI库

Framework7 / Firebase ( Firestore )

Framework7:不同视图的默认 URL 不起作用