1

我正在使用带有附加功能的 angular 和 ui-router，以便在从移动 spa 应用程序的详细信息页面返回时，我可以使用粘性状态来维护列表视图滚动位置。

我的列表是一个剑道移动列表视图。我正在实施 crud，并希望在返回时反映在列表视图中所做的更改。我没有在我的后退按钮中使用 $state.go，而是使用 $window.history.back 因为我希望后退按钮“按预期”工作，所以我不能使用该函数的 reload 参数。

我连接了 onReactivate 并注入具有标志的服务，告诉它是否已完成 crud 操作并重新加载列表。这一切正常，我可以成功确定是否需要重新加载屏幕。

所以，我尝试使用 kendo.mobile.ui.ListView 刷新方法。我使用 angular.element("#idoflistview").data("kendoMobileListView").refresh()。它确实找到并刷新了它，但是所有项目都设置为 style="transform: translate3d(0px, 0px, 0px);"，所以它们都相互重叠。

我最初确实尝试只做一个 $state.reload() 并重建页面，它确实有效，因为它在控制器中调用了我的 init 函数，我可以使用标志知道以正确的方式请求数据，但是listview 不会建立。数据请求已发送并检索，但列表视图为空。

如果可能的话，我宁愿只刷新列表，因为服务已经拥有带有更新数据的 kendo 数据源，所以真的不需要再次调用数据库。

因此，我的列表视图设置正常工作，但只有在我刷新 onReactivate 时才会中断，因为它们都在那里，但由于列表中的每个 li 都从 0 开始（虽然更新在那里，所以它确实刷新了）。

我假设这是因为它需要稍后再做。如果是这样，我该怎么做？

关于如何让刷新方法正常工作的任何想法？还是有更好的方法来做到这一点？

这是抽象视图：

<div ui-view="activityinquirylist"  ng-show="$state.includes('activityinquiry.list')"></div>
<div ui-view="activityinquirydetails" ng-show="$state.includes('activityinquiry.details')"></div>
<div ui-view="activityinquirycrud" ng-show="$state.includes('activityinquiry.crud')"></div>

这是我声明我的列表视图的方式：

<div id="activityListScroller" kendo-mobile-scroller="activityListScroller" k-pull-to-refresh="true" k-pull="vm.pullToRefresh" k-pull-offset="200" class="scroller-header-footer">
    <ul id="activityListView" kendo-mobile-list-view="activityListView" k-data-source="vm.activityInquiryService.activityInqiuryDataSource" k-template="vm.activityTemplate" k-on-click="vm.listClicked(kendoEvent)" k-auto-bind="false" k-load-more="true"></ul>
</div>

这是状态的代码：

.state('activityinquiry', {
    //sticky: true,
    abstract: true,
    url: '/activityinquiry',
    templateUrl: 'app/views/cm/activityinquiry.html'
})
.state('activityinquiry.list', {
    url: '/activityinquirylist',
    views: {
        'activityinquirylist@activityinquiry': angularAMD.route({
            templateUrl: 'app/views/cm/activityinquirylist.html',
            controller: 'activityinquirylistController',
            controllerUrl: 'controllers/cm/activityinquirylistController',
            controllerAs: "vm"
        })
    },

    sticky: true,
    deepStateRedirect: false,
    onReactivate: function (activityInquiryService) {
        console.log("reactivating");
        if (activityInquiryService.model.reloadList && activityInquiryService.model.reloadList == true) {
            activityInquiryService.model.reloadList = false;
            var item = angular.element("#activityListView").data("kendoMobileListView");
            if (item) {
                item.refresh();
            }
        }
    }
})

编辑：经过进一步调查，我发现这是由于 kendo.mobile.scroller。在我刷新列表视图时它不可用，因此它以某种方式弄乱了列表视图的绘制方式。这对我来说毫无意义，因为列表视图位于滚动条内（如果我之后检查仍然如此）。如果我删除滚动条，它会按预期工作，但我需要那个滚动条，因为我没有使用剑道视图并且页面上有页脚，所以它会随着内容滚动，我正在使用拉动刷新滚动条的功能（不想使用 listviews pull 来刷新，因为它不允许我处理刷新是如何发生的，而滚动条却可以）。

另一个编辑：我已经追踪到它只有在我在列表视图上加载更多 true 时才会发生。如果我关闭它，那么它工作正常。因此，在上面的代码示例中，如果我设置 k-load-more="false" 它可以工作。我也用无限滚动尝试过，两者都有相同的效果。

4

0 回答 0