Question

我的页面上有一个问题和4个答案，刷卡器效果很好，我可以转到下一个问题再返回。我想要的是禁用滑动到下一个问题，直到按下答案为止。我成功地用$ scope变量和ng-show隐藏了“下一个”箭头，但是即使每次我按一个答案调用具有新的禁用选项的initSwiper函数后，仍可以使用触摸/鼠标进行滑动。这可能吗？这是当前有效的initSwiper函数。

$scope.initSwiper = function() {
        var swiper = new Swiper('.swiper-container', {
            // Navigation arrows
            nextButton : '.swiper-button-next',
            slideToClickedSlide : true,
            onSlideChangeStart : function(swiper) {
                $scope.index = swiper.activeIndex;
                setExplanation($scope.index);
                $scope.$apply();
                $scope.test = $scope.tests[$scope.index];
                swiper.lockSwipeToPrev();
            }
        }); 
    }

按下答案后，我调用的另一个初始化函数就是这样，我仅将此swiper.lockSwipeToNext()添加到onSlideChangeStart: function。

Answer 1

您可以在初始化Swiper时尝试使用noSwipingClass选项，并使用$scope有条件地将诸如no-answer-yet之类的css类应用于Swiper幻灯片。像这样：

$scope.initSwiper = function() {
    var swiper = new Swiper('.swiper-container', {
      ...,
      noSwipingClass: "no-answer-yet",
    }); 
}

动态启用/禁用滑动（触摸/鼠标）

1 个答案: