刷卡器已锁定

Question

我正在尝试在同一页面上获取多个 SWIPERS (idangero.us/swiper/)，我正在设置一家商店，我想为每个类别显示不同的滑动，我很容易生成，这里的问题是第二个刷卡器被锁定并且由于某种原因在更改缩放后它被解锁并且我可以在它上面刷卡：有问题的视频：https://streamable.com/s/a88zy/jutbzh

最奇怪的是我试图复制，但在 fiddle 中它按预期工作：https://jsfiddle.net/g4b0_88/L9ph48ev/

这里是我为每个类别生成滑动器的代码：

$scope.loadSwiper = function(idcat){
$scope.swiperSliders[idcat-1] = new Swiper('.swiper'+$scope.store.categories[idcat-1].idcategory, {
direction: 'horizontal',
loop: false,
nextButton: '.button-next'+$scope.store.categories[idcat-1].idcategory,
prevButton: '.button-prev'+$scope.store.categories[idcat-1].idcategory,
slidesPerView: 'auto',
spaceBetween: 0,
freeMode: true
});
$scope.swiperSliders[idcat-1].unlockSwipes();
};

这里是 HTML，我在其中加载类别和每个类别的产品：

<div ng-repeat="category in store.categories" ng-repeat-end-watch="categoriesWatcher">
            <h1 class="category">{{category.name}}</h1>
                <div class="swiper-container swiper{{category.idcategory}}">
                    <div class="swiper-wrapper featured-carousel">
                        <div class="swiper-slide product-block" ng-repeat="product in store.featured_products[category.idcategory-1]">
                            <div id="note{{product.idproduct}}" class="add_product_note note{{product.idproduct}}" ng-show="product_in_cart.data[product.idproduct]"><i class="fa fa-pencil-square-o" ng-click="addProductNote($ev, product.idproduct)" aria-hidden="true"></i></div>
                            <div class="product-img">
                                <img class="center-block" ng-src="<?php echo site_url('/assets/product-img/'); ?>{{product.image}}"/>
                            </div>
                            <div class="product-name">
                                <h4>{{product.name}}</h4>
                            </div>
                            <div class="product-desc">
                                <h4>{{product.description}}</h4>
                            </div>
                            <div class="product-price">
                                <p>{{product.sell_price | currency}}</p>
                            </div>
                            <div class="product-add" ng-show="product.type == 2">
                                <ngcart-addtocart id="{{product.idproduct}}" name="{{product.name}}" price="{{product.sell_price}}" quantity="1" img="<?php echo site_url('assets/product-img/');?>{{product.image}}" ptype="{{product.type}}" note="">Agregar</ngcart-addtocart>
                            </div>
                            <div class="product-add" ng-show="product.type == 1">
                                <ngcart-addtocart id="{{product.idproduct}}" name="{{product.name}}" price="{{product.sell_price}}" quantity="0.1" img="<?php echo site_url('assets/product-img/');?>{{product.image}}" ptype="{{product.type}}" note="">Agregar</ngcart-addtocart>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-prev button-prev{{category.idcategory}}"></div>
                    <div class="swiper-button-next button-next{{category.idcategory}}"></div>
                </div>
            </div>

正如我所说，Swipers 加载正确但由于某种原因锁定并且在放大或缩小时解锁。

Answer 1

我找到了解决方案，我没有使用 $scope.swiperSliders[idcat-1].unlockSwipes();，而是使用了以下代码块：

$timeout(function(){
 $scope.swiperSliders[idcat-1].onResize();
 $scope.swiperSliders[idcat-1].update(true); 
}, 100);

刷卡器已锁定

Swiper inits locked

angularjs

init

swiper

locked