Question

我正在使用名为angular slick的外部插件。 https://github.com/vasyabigi/angular-slick 我的要求是我需要桌面上有3张幻灯片，而手机上只有1张幻灯片。我不想为此使用jquery 我通过我的代码实现了这一点，但唯一的问题是当我调整浏览器大小时，我必须强制浏览器刷新以查看我的响应更改。由于我的是单页应用程序，刷新没有意义。我可以使用角度或其他东西的一些概念来实现相同的效果。（Jquery不允许）我的html在下面

<slick infinite=true slides-to-show={{itemToShow}} slides-to-scroll=3 class="slider multiple-items">  
<div style="background-color: red" ng-repeat="item in items">
 <h3>{{item}}</h3>
</div>
</slick>

main.js

angular.module('slickApp')
.controller('myctrl', ['$scope', function($scope){
$scope.items = [1,2,3,4,5,7,8]; $scope.itemToShow = 3;
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;


window.onresize = function(event)
{
document.location.reload(true);
}


if ( width < 600)
{
$scope.itemToShow = 1;
}
}]);

Answer 1

试试这个：

window.onresize = function(event) {
    width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (width < 600) {
        $scope.itemToShow = 1;
    }
};

只需删除document.location.reload(true);功能中的window.onresize，然后替换为上面的代码。

希望这有帮助。

angularjs响应（没有浏览器刷新）

1 个答案: