初用swiper插件
swiper初始化的时候自动检测swiper-wrapper下有多少个swiper-slide,则允许滑动多少个img。 而在ng-repeat在swiper初始化之后加载的标签,swiper则无法判断,所以划不动分页器只生成对应最初的一个swiper-slide的span。
解决办法
- 在swiper初始化中添加
observer:true
,修改swiper自己或子元素时自动初始化swiper和observeParents:true
//修改swiper的父元素时自动初始化swiper - 在
$http
请求到数据之后用$timeout
异步初始化swiper,并DOM获取此时的分页器中元素进行修改(但是如果不必要的话,angular最好还是用绑定而不是DOM)
const detail=angular.module('detail', ['list','app']);
detail.controller('detailCtrl', ['$http', '$scope','$routeParams','$timeout',function($http, $scope,$routeParams,$timeout){
const phoneIdPage=$routeParams.phoneId.split(':')[1];
$http({method: 'get',url: './static/phones/'+phoneIdPage+'.json'}).then(resp => {
$scope.List = resp.data;
$scope.ImgList = resp.data.images;
console.log($scope.ImgList);
$timeout(function(){
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
pagination: {
el: '.swiper-pagination',
clickable: true,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true//修改swiper的父元素时,自动初始化swiper
}
});
setTimeout(function(){
var points=document.getElementById("point").children;
for (let i = 0; i < points.length; i++) {
let imgnew=document.createElement("img");
imgnew.src="../../../static/"+$scope.ImgList[i];
imgnew.style.width="100%";
imgnew.style.height="100%";
points[i].appendChild(imgnew);
}
},30);
});
}).catch(error => {
console.log(error);
});
$scope.name=phoneIdPage;
console.log($scope.point);
}])
效果图
商品展示页(分页器已调整修改过样式)
备注
这是一个悲伤的故事,本来是想偷懒直接用一下swiper插件,结果有踩坑调试的时间,还不如自己写一些css动画或者angular动画Animations和js代码实现一下,csdn博客还是提到swiper的observer:true
,和 observeParents:true
/的很多,但是异步还是很少,我也是测试之后才发现筛选之后再点进详情来分页器用来控制的span只有一个……