Sw in锁定
问题描述:
我想要在同一页面上获得多个SWIPERS(idangero.us/swiper/),我正在设置一个商店,并且我想为每个类别显示不同的swipe,我轻松生成,这里的问题是,第二次刷卡inits锁定和鲍勃迪伦放大它被解锁,我可以扫过之后某些原因: 视频与问题:https://streamable.com/s/a88zy/jutbzhSw in锁定
最奇怪的是,我试图复制,但在拨弄它按预期工作:https://jsfiddle.net/g4b0_88/L9ph48ev/
下面的代码在那里我产生swipers为每个类别:
$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加载正确但被锁定在某种原因和缩放,或zooming-时解除了出。
答
我找到了解决办法,而是采用$scope.swiperSliders[idcat-1].unlockSwipes();
我把下面的代码块:
$timeout(function(){
$scope.swiperSliders[idcat-1].onResize();
$scope.swiperSliders[idcat-1].update(true);
}, 100);